jQuery選擇器問題切換

Question

我的切換正在發生，但它也被應用到第二個嵌套級別。

加載時，我只想要父母一和父母兩個，第一個嵌套UL不顯示。第二個嵌套UL將在此LI內保持開放。

當我點擊Parent One或Parent Two時，第一個嵌套的ul應該打開/關閉。第二個嵌套的UL應該始終在這個LI內部保持開放。

<div class="navColumn"> 
    <ul class="ltColmenu"> 
     <li><a href="">No Child 1</a></li> 
     <li><a href="">No Child 2</a></li> 
     <li><a href="">No Child 3</a></li> 
     <li><a href="#" class="headNavItem headNavItemClose">Parent One</a> 
      <ul> 
       <li><a href="">Item 1</a></li> 
       <li><a href="">Item 2</a></li> 
       <li><a href="">Item 3</a></li> 
       <li><a href="" class="headNavItem">Item 4</a> 
        <ul> 
         <li><a href="">Item 1 -1</a></li> 
         <li><a href="">Item 1 -2</a></li> 
         <li><a href="">Item 1 -3</a></li> 
         <li><a href="">Item 1 -4</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a href="">No Child 4</a></li> 
     <li><a href="">No Child 5</a></li> 
     <li><a href="#" class="headNavItem headNavItemClose">Parent Two</a> 
      <ul> 
       <li><a href="">Item 5</a></li> 
       <li><a href="">Item 6</a></li> 
       <li><a href="">Item 7</a></li> 
       <li><a href="" class="headNavItem">Item 8</a> 
        <ul> 
         <li><a href="">Item 2 -1</a></li> 
         <li><a href="">Item 2 -2</a></li> 
         <li><a href="">Item 2 -3</a></li> 
         <li><a href="">Item 2 -4</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

我有以下jquery，選擇器正在拾取項目4和項目8以及。我不想要這種行爲。我只希望選擇器拿起父母一和父母二。我該如何解決這個問題？

$(document).ready(function() { 
    //onload hide first level nested items, all other levels will remain open inside top LI 
    $("ul.ltColmenu > li ul").slideToggle("fast"); 
    //click on first level LIs, as first level only toggles. all other levels will remain open inside top LI 
    $("ul.ltColmenu > li a.headNavItem").click(function(){ 
     if ($(this).next("ul").is(':visible')) { 
      $(this).removeClass("headNavItemOpen").removeClass("headNavItemClose").addClass("headNavItemClose"); 
     } 
     else{ 
      $(this).removeClass("headNavItemOpen").removeClass("headNavItemClose").addClass("headNavItemOpen"); 
     } 
     $(this).next("ul").slideToggle("slow"); 
     return false; 
    }); 

}); 

Answer 1

這個工作對我來說...

$(document).ready(function() { 
    //onload hide first level nested items, all other levels will remain open inside top LI 
    $("ul.ltColmenu > li > ul").slideToggle("fast"); 
    //click on first level LIs, as first level only toggles. all other levels will remain open inside top LI 
    $("ul.ltColmenu > li > a.headNavItem").click(function(){ 
     if ($(this).next("ul").is(':visible')) { 
      $(this).removeClass("headNavItemOpen").removeClass("headNavItemClose").addClass("headNavItemClose"); 
     } 
     else{ 
      $(this).removeClass("headNavItemOpen").removeClass("headNavItemClose").addClass("headNavItemOpen"); 
     } 
     $(this).next("ul").slideToggle("slow"); 
     return false; 
    }); 

});