jQuery的元素选择

Question

我有classis HTML 2级深度的导航菜单看起来像这样：

<nav> 
     <ul> 
     <li><a href="#">1</a> 
       <ul> 
        <li><a href="#">1.1</a><li> 
        <li><a href="#">1.2</a><li> 
        <li><a href="#">1.3</a><li> 
       </ul> 
      </li> 

      <li><a href="#">2</a> 
       <ul> 
        <li><a href="#">2.1</a><li> 
        <li><a href="#">2.2</a><li> 
        <li><a href="#">2.3</a><li> 
       </ul> 
      </li> 

      <!-- etc --> 

     </ul> 
    </nav> 

jQuery的功能应该使切换上点击。第一级是好的，但在第二级下，当我点击锚点1时，它不打开与该锚点元素相关的子菜单（1.1,1.2,1.3），但它切换所有子菜单（1.x， 2.x，3.x，..）一次。那么如何让它只影响被点击的锚元素的子元素？

jQuery(document).ready(function($){ 

    $('nav').prepend('<div id="menu-icon">Menu</div>'); 

    $("nav > ul").hide(); 

    $("nav > ul >li > ul").hide(); 

    $("#menu-icon").on("click", function(){ 
         $("nav > ul").slideToggle(); 
         $(this).toggleClass("active"); 
          } 
        ); 


    $("nav > ul > li > a ").on("click", function(){ 
           $("nav > ul > li > ul").slideToggle(); 
           $(this).toggleClass("active"); 
            } 
          ); 




    }); 

更新：这里是的jsfiddle：http://jsfiddle.net/kNZ3E/

Answer 1

不改变你的代码太多：

$("nav ul > li > a ").on("click", function(){ 
    $(this).siblings("ul").slideToggle(); 
    $(this).toggleClass("active"); 
} 
); 

编辑：你应该能够巢更多使用此代码列表，以及，考虑到它将始终抓取兄弟元素ul元素（如果存在）。你可能需要更新你的css然而