gpt4 book ai didi

jQuery 多级子菜单

转载 作者:行者123 更新时间:2023-12-01 07:50:49 25 4
gpt4 key购买 nike

好吧,这可能很简单,但做不到......

我想要制作的是一个具有多级支持的子菜单

现在一步一步:

  1. 用“ul”隐藏所有“li”

  2. 通过在单击时向 li > ul 添加“Show-subnav”类来显示子导航

问题:所有点击的 li > ul 保持打开状态

如何关闭之前单击的子导航?

例如:当您单击 Item1 时,它会显示 Item1 > 1 级子导航,但即使单击 Item 2 子导航后仍保持打开状态。当您单击项目 2 时,项目 1 应关闭。

feel free to edit this pen

$(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?
});

});
#nav .show-subnav {
display: block!important;
}
<!-- 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>

最佳答案

从子 ul 元素中删除开放类

$(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')
});
});
#nav .show-subnav {
display: block;
}
#nav li > ul {
display: none;
}
<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>

关于jQuery 多级子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30364774/

25 4 0