文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >jQuery多级子菜单

问jQuery多级子菜单
EN

Stack Overflow用户
提问于 2015-05-21 04:44:42
回答 4查看 4.6K关注 0票数 1

好的，这可能很简单，但不能使它成为…

我想做的是一个多级支持的子菜单。

现在一步一步地：

  1. 用“ul”隐藏所有“li”
  2. 通过单击li > ul添加类“Show - subnav”来显示子导航。

问题:所有点击的li > ul都保持打开。

我怎样才能使以前点击的子导航关闭？

例:当您单击Item1时，它会显示Item1 >Level1Subnav，但即使在单击项2子导航后仍保持打开状态。当您单击第2项时，Item1应关闭。

请随意编辑这支笔

​

代码语言：javascript
复制
$(document).ready(function() {

  // Toggle Sub Nav
  $("#nav li:has(ul)").children("ul").hide(); // hide the li UL
  $("#nav li:has(ul)").find("a").click(function() {
    // Add .show-subnav class to revele on click
    $(this).parent().find("ul:first").toggleClass("show-subnav");
    // how to hide previously clicked submenus?
  });

});
代码语言：javascript
复制
#nav .show-subnav {
  display: block!important;
}
代码语言：javascript
复制
<!-- Nav primary start  -->
<nav id="nav">
  <ul>
    <li><a href="#">Item 1 Submenu</a>
      <ul>
        <li><a href="#">Level 1 Submenu</a>
          <ul>
            <li><a href="#">Level 2 </a>
            </li>
            <li><a href="">Level 2 </a>
            </li>
            <li><a href="">Level 2</a>
            </li>
            <li><a href="">Level 2</a>
            </li>
            <li><a href="#">Level 2</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
      </ul>
    </li>
    <li><a href="#">Item 2 Submenu</a>
      <ul>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
      </ul>
    </li>
    <li><a href="#section-3">Link 3</a>
    </li>
    <li><a href="#section-4">Link 4</a>
    </li>
    <li><a href="#section-5">Link 5</a>
    </li>
  </ul>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​

jquery
menu
nav
multi-level
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2015-05-21 04:51:47

使用.removeClass()删除已经打开的ul

代码语言：javascript
复制
$(document).ready(function() {

  // Toggle Sub Nav
  $("#nav li:has(ul)").children("ul").hide(); // hide the li UL
  $("#nav li:has(ul)").find("a").click(function() {
    var parent = $(this).parent()
    parent.siblings().find("ul.show-subnav").removeClass("show-subnav");
    parent.find("ul:first").toggleClass("show-subnav");
  });

});

​

代码语言：javascript
复制
$(document).ready(function() {

  // Toggle Sub Nav
  $("#nav li:has(ul)").children("ul").hide(); // hide the li UL
  $("#nav li:has(ul)").find("a").click(function() {
    // Add .show-subnav class to revele on click
    var parent = $(this).parent()
    parent.siblings().find("ul.show-subnav").removeClass("show-subnav");
    parent.find("ul:first").toggleClass("show-subnav");
    // how to hide previously clicked submenus?
  });

});
代码语言：javascript
复制
#nav .show-subnav {
  display: block!important;
}
代码语言：javascript
复制
<!-- Nav primary start  -->
<nav id="nav">
  <ul>
    <li><a href="#">Item 1 Submenu</a>
      <ul>
        <li><a href="#">Level 1 Submenu</a>
          <ul>
            <li><a href="#">Level 2 </a>
            </li>
            <li><a href="">Level 2 </a>
            </li>
            <li><a href="">Level 2</a>
            </li>
            <li><a href="">Level 2</a>
            </li>
            <li><a href="#">Level 2</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
      </ul>
    </li>
    <li><a href="#">Item 2 Submenu</a>
      <ul>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
      </ul>
    </li>
    <li><a href="#section-3">Link 3</a>
    </li>
    <li><a href="#section-4">Link 4</a>
    </li>
    <li><a href="#section-5">Link 5</a>
    </li>
  </ul>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​

票数 1
EN

Stack Overflow用户

发布于 2015-05-21 04:50:16

从子ul元素中删除打开的类

​

代码语言：javascript
复制
$(document).ready(function() {
  $("#nav li:has(ul) > a").click(function() {
    var $ul = $(this).next("ul").toggleClass("show-subnav");
    $ul.find('ul.show-subnav').removeClass('show-subnav');
    $('#nav ul.show-subnav').not($ul.parentsUntil('#nav', 'ul').add($ul)).removeClass('show-subnav')
  });
});
代码语言：javascript
复制
#nav .show-subnav {
  display: block;
}
#nav li > ul {
  display: none;
}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Nav primary start  -->
<nav id="nav">
  <ul>
    <li><a href="#">Item 1 Submenu</a>
      <ul>
        <li><a href="#">Level 1 Submenu</a>
          <ul>
            <li><a href="#">Level 2 </a>
            </li>
            <li><a href="">Level 2 </a>
            </li>
            <li><a href="">Level 2</a>
            </li>
            <li><a href="">Level 2</a>
            </li>
            <li><a href="#">Level 2</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
      </ul>
    </li>
    <li><a href="#">Item 2 Submenu</a>
      <ul>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
      </ul>
    </li>
    <li><a href="#section-3">Link 3</a>
    </li>
    <li><a href="#section-4">Link 4</a>
    </li>
    <li><a href="#section-5">Link 5</a>
    </li>
  </ul>
</nav>

​

票数 1
EN

Stack Overflow用户

发布于 2015-05-21 05:33:20

这里有一种方法。您还可以使用.children()方法而不是父方法。

​

代码语言：javascript
复制
$(document).ready(function() {

  // Toggle Sub Nav
  $("#nav li:has(ul)").children("ul").hide(); // hide the li UL
  $("#nav li:has(ul)").find("a").click(function(e) {
    // Add .show-subnav class to revele on click
    var $clicked = $(this),
        theClass = 'show-subnav';
    
    $('.'+theClass).each(function(i,v) {//iterate all the opened uls
      if (!$clicked.parents('.'+ theClass).length == 1) {//check if clicked element has a ul with the opened Css Class, and remove that class if condition fails
        $(v).removeClass(theClass);
      }
    });
    $(this).parent().find("ul:first").toggleClass(theClass);
    // how to hide previously clicked submenus?
  });

});
代码语言：javascript
复制
#nav .show-subnav {
  display: block!important;
}
代码语言：javascript
复制
<!-- Nav primary start  -->
<nav id="nav">
  <ul>
    <li><a href="#">Item 1 Submenu</a>
      <ul>
        <li><a href="#">Level 1 Submenu</a>
          <ul>
            <li><a href="#">Level 2 </a>
            </li>
            <li><a href="">Level 2 </a>
            </li>
            <li><a href="">Level 2</a>
            </li>
            <li><a href="">Level 2</a>
            </li>
            <li><a href="#">Level 2</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
      </ul>
    </li>
    <li><a href="#">Item 2 Submenu</a>
      <ul>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
        <li><a href="#">Level 1 </a>
        </li>
      </ul>
    </li>
    <li><a href="#section-3">Link 3</a>
    </li>
    <li><a href="#section-4">Link 4</a>
    </li>
    <li><a href="#section-5">Link 5</a>
    </li>
  </ul>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/30364774

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档