jQuery元素选择答案

【问题标题】：jQuery element selectjQuery元素选择
【发布时间】：2014-04-10 13:28:49
【问题描述】：

我的 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 函数应该让它在点击时切换。第一级很好，但在第二级，当我点击 anchor 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/

【问题讨论】：

你能做一个 JSFiddle 吗？
刚刚用链接更新了问题。

标签： jquery select toggle this

【解决方案1】：

无需过多更改代码：

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

edit：您应该也可以使用此代码嵌套更多列表，考虑到它总是会抓取兄弟 ul 元素（如果存在）。但是，您可能需要更新您的 css

【讨论】：