通過遍歷列表使用jQuery

Question

我的目錄結構是這樣的：

<ul class="nav-list"> 
     <li class="nav-list-item first-stage"> 
      <a href=""> 
      <table> 
       <tr> 
        <td class="first">Stuff</td> 
        <td class="second"><i class="fa fa-chevron-down"></i></td> 
       </tr> 
      </table> 
      </a> 
     </li> 
    <ul class="inner-nav"> 
      <li class="nav-list-item second-stage selected"> 
       <a href=""> 
       <table> 
        <tr> 
         <td class="inner-first"><div class="icon icon-arrow-right"></div></td> 
         <td class="inner-second">Blaa</td> 
        </tr> 
       </table> 
       </a> 
      </li> 

這裏是我的jQuery：

if $(".first-stage").click(function() { 
    var nextItem = $(this).next("li").chidren(".second-stage").find("i"); 
    if ($(this).next(".inner-nav").is(":hidden")) { 
     $(this).slideDown(); 
     $(nextItem).removeClass(".fa-chevron-down").addClass(".fa-chevron-up"); 
    } else { 
     $(this).slideUp(); 
     $(nextItem).removeClass(".fa-chevron-up").addClass(".fa-chevron-down"); 
    } 
)}; 

我打不通列表遍歷工作。這應該是一個下拉列表。不要介意li周圍的「a href」。

Answer 1

首先，你需要修改你的HTML，使其有效：使用slideToggle和toggleClass

<ul class="nav-list"> 
    <li class="nav-list-item first-stage"> 
     <table> 
      <tr> 
       <td class="first">Stuff</td> 
       <td class="second"><i class="fa fa-chevron-down"></i></td> 
      </tr> 
     </table> 
     <ul class="inner-nav"> 
      <li class="nav-list-item second-stage selected">    
       <a href=""> 
        <table> 
         <tr> 
          <td class="inner-first"><div class="icon icon-arrow-right"></div></td> 
          <td class="inner-second">Blaa</td> 
         </tr> 
        </table> 
       </a> 
      </li> 
     </ul> 
    </li> 
</ul> 

然後你就可以簡化您的jQuery代碼：

$(".first-stage").click(function(e) { 
    var $nextItem = $('ul', this); 
    var $i = $('i', this); 
    $nextItem.slideToggle(function() { 
     $i.toggleClass('fa-chevron-down fa-chevron-up'); 
    }); 
}); 

Example fiddle