Question

我有嵌套的ul li list

牙齿

隔离材料
- Pulp Devitalizer
- 蚀刻剂
正畸
牙科药品

口服

使用以下html

<ul class="nav" id="product-cat-menu">
<li>
    <span class="right-plus main-plus"><i class="fa fa-plus-square-o"></i></span>Dental
    <ul>
      <li>
        <span class="right-plus "><i class="fa fa-plus-square-o"></i></span>Isolation Materials
        <ul>
          <li>Pulp Devitalizer</li>
          <li>Etchants</li>
        </ul>
      </li>
      <li>
        Orthodontics
      </li>
      <li>
         <span class="right-plus "><i class="fa fa-plus-square-o"></i></span>Dental Medicines
      </li>
    </ul>
   </li>
   <li>
     Oral
   </li>

#product-cat-menu ul{
display: none;
}

我正在使用以下jquery进行上滑并向下滑动列表

$(document).ready(function () {       
$("#product-cat-menu .right-plus").click(function (evt) {
    var $this = $(this);        
    $this.closest('li').siblings().find('ul').slideUp();       
    $this.siblings().slideDown();
    $this.find('i').removeClass("fa-plus-square-o");        
    $this.closest('li').siblings().find('span i').addClass("fa-plus-square-o");
    evt.preventDefault();        
});    
});

这是完美的工作...但实际上我需要，第一个li总是在页面加载时向下滑动。怎么可能

Answer 1

您可以使用以下方法触发第一个跨度的点击事件：

 $("#product-cat-menu .right-plus:first").click();

Answer 2

您可以通过在代码中添加以下代码来实现此目的

$(document).ready(function () {       
  $("#product-cat-menu .right-plus").click(function (evt) {
     //your code
  });    
  $("#product-cat-menu .right-plus").eq(0).click();
});

Answer 3

点击事件后添加.first().click()

最终代码看起来像

$(document).ready(function () {       
    $("#product-cat-menu .right-plus").click(function (evt) {
        var $this = $(this);        
        $this.closest('li').siblings().find('ul').slideUp();       
        $this.siblings().slideDown();
        $this.find('i').removeClass("fa-plus-square-o");        
        $this.closest('li').siblings().find('span i').addClass("fa-plus-square-o");
        evt.preventDefault();        
    }).first().click(); // new line
});

Jquery向上滑动并向下滑动 - 第一个li总是向下滑动

3 个答案: