Javascript下拉菜单Nav-收缩非选定选项
我正在努力让Javascript下拉导航按我的意愿工作。这里有一支笔，是我要去的地方： HTMLJavascript下拉菜单Nav-收缩非选定选项,javascript,jquery,html,css,drop-down-menu,Javascript,Jquery,Html,Css,Drop Down Menu,我正在努力让Javascript下拉导航按我的意愿工作。这里有一支笔，是我要去的地方： HTML <div id="pattern" class="pattern"> <a href="#menu" class="menu-link">Menu</a> <nav id="menu" class="menu" role="navigation"> <ul class="level-1
<div id="pattern" class="pattern">
<a href="#menu" class="menu-link">Menu</a>
<nav id="menu" class="menu" role="navigation">
<ul class="level-1">
<!--Parent #1-->
<li class="has-subnav">
<a href="#">Parent #1</a>
<ul class="level-2">
<li class="has-subnav">
<a href="#">Child #1</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-subnav">
<a href="#">Child #2</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-subnav">
<a href="#">Child #3</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-subnav">
<a href="#">Child #4</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!--Parent #2-->
<li class="has-subnav">
<a href="#">Parent #2</a>
<ul class="level-2">
<li class="has-subnav">
<a href="#">Child #1</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-subnav">
<a href="#">Child #2</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-subnav">
<a href="#">Child #3</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-subnav">
<a href="#">Child #4</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!--Parent #3-->
<li class="has-subnav">
<a href="#">Parent #3</a>
<ul class="level-2">
<li class="has-subnav">
<a href="#">Child #1</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-subnav">
<a href="#">Child #2</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-subnav">
<a href="#">Child #3</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-subnav">
<a href="#">Child #4</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!--Parent #4-->
<li class="has-subnav">
<a href="#">Parent #4</a>
<ul class="level-2">
<li class="has-subnav">
<a href="#">Child #1</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-subnav">
<a href="#">Child #2</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-subnav">
<a href="#">Child #3</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-subnav">
<a href="#">Child #4</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!--Parent #5-->
<li class="has-subnav">
<a href="#">Parent #5</a>
<ul class="level-2">
<li class="has-subnav">
<a href="#">Child #1</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-subnav">
<a href="#">Child #2</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-subnav">
<a href="#">Child #3</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-subnav">
<a href="#">Child #4</a>
<ul class="level-3">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li class="has-subnav">
<a href="#">Grandchild #3</a>
<ul class="level-4">
<li><a href="#">Great-Grandchild #1</a></li>
<li><a href="#">Great-Grandchild #2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
$(document).ready(function() {
$('body').addClass('js');
var $menu = $('#menu'),
$menulink = $('.menu-link'),
$menuTrigger = $('.has-subnav > a');
$menulink.click(function(e) {
e.preventDefault();
$menulink.toggleClass('active');
$menu.toggleClass('active');
});
$menuTrigger.click(function(e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('active').next('ul').toggleClass('active');
});
});
它工作正常，但现在在小屏幕下拉模式下，我希望一次只打开一个子菜单。例如，如果有人单击Parent#1查看下拉列表，如果他们单击Parent#2查看下拉列表，那么Parent#1应该隐藏。我想我找到了它，只是替换了
$menuTrigger。用下面的代码单击（函数（e）包含a:href我想我找到了它，只是替换了
$menuTrigger。用下面的代码单击（函数（e）包含a:href你可以使用bootstrap css吗？菜单选项很简单。我不想使用bootstrap来对这个问题进行排序-这会有很多额外的css我不需要。你可以使用bootstrap css吗？菜单选项很简单。我不想使用bootstrap来对这个问题进行排序-我不需要很多额外的css
$(document).ready(function() {
$('body').addClass('js');
var $menu = $('#menu'),
$menulink = $('.menu-link'),
$menuTrigger = $('.has-subnav > a');
$menulink.click(function(e) {
e.preventDefault();
$menulink.toggleClass('active');
$menu.toggleClass('active');
});
$menuTrigger.click(function(e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('active').next('ul').toggleClass('active');
});
});
$menuTrigger.click(function(e) {
e.preventDefault();
var $newActive = $(this);
$( "#menu ul.active" ).each(function( index ) {
if(!$.contains($( this )[0],$newActive[0])){
$( this ).removeClass('active');
$( this ).prev('a.active').removeClass('active');
}
});
$newActive.toggleClass('active').next('ul').toggleClass('active');
});