我正在努力让Javascript下拉导航按照我的意愿工作。这里有一支笔，我要去的地方：
https://codepen.io/mikehdesign/pen/QEgGNW
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">
<!--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>
SCSS
a.menu-link {
float: right;
display: block;
padding: 1em;
}
.menu, .menu > ul ul {
clear: both;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.js .menu, .js .menu > ul ul {
overflow: hidden;
max-height: 0;
background: rgba(0,0,0,0.1);
}
.menu.active, .js .menu > ul ul.active {
max-height: 55em;
}
.menu > ul {
border-top: 1px solid #808080;
}
.menu li a {
color: #000;
display: block;
padding: 0.8em;
border-bottom: 1px solid #808080;
position: relative;
}
.menu li.has-subnav > a:after {
content: '+';
position: absolute;
top: 0;
right: 0;
display: block;
font-size: 1.5em;
padding: 0.25em 0.5em;
}
.menu li.has-subnav > a.active:after {
content: "-";
}
@media screen and (min-width: 48.25em) {
.pattern {
overflow: visible;
}
a.menu-link {
display: none;
}
.js .menu, .js .menu > ul ul {
max-height: none;
overflow: visible;
background: none;
}
.js .menu > ul ul {
background: #808080;
display: none;
}
.js .menu > ul li:hover > ul {
display: block;
}
.menu ul {
margin: 0 0 0 -0.25em;
border: 0;
text-align: center;
}
.menu li a {
border: 0;
}
.menu li.has-subnav > a {
padding-right: 2em;
}
.menu li.has-subnav > a:after {
content: ">";
font-size: 1em;
padding: 0.8em 0.5em;
}
.menu .level-1 > li.has-subnav > a:after {
content: "▼";
}
.menu > ul li {
margin: 0 0.25em;
}
.menu > ul > li {
display: inline-block;
position: relative;
}
.menu > ul ul {
position: absolute;
top: 0;
left: 12em;
width: 12em;
}
.menu > ul ul li {
position: relative;
}
.menu > ul ul.level-2 {
top: 3em;
left: 0;
}
}
JQUERY JAVASCRIPT
$(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');
});
});
它工作正常，但现在在小屏幕下拉模式下，我希望一次只打开一个下拉子菜单。例如，如果有人点击父＃1查看下拉列表，如果他们然后点击父＃2查看该下拉列表，那么父＃1应该隐藏。我无法弄清楚如何实现这个目标
答案 0 :(得分：0)
我想我发现了它，只是用下面的代码替换了$menuTrigger.click(function(e)。它基本上遍历所有其他活动的ul元素，检查（使用contains）它是否与当前选择在同一分支上，并相应地停用它和相关的a:href。更新了代码集here
$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');
});