下拉菜单-一次只打开一个菜单

Question

我有这个功能用于多下拉菜单：

$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});

它有效：下拉菜单实际上会下降，这很好，我只是希望它在用户点击下一个菜单时自动关闭/隐藏。。。我希望此时只打开一个下拉菜单，否则菜单本身会太高！

这是我正在处理的代码：https://codepen.io/amsteldroid/pen/NoBYye

正如你所看到的，所有的下拉菜单都保持打开状态，我希望一次只打开一个。

$('.sub-menu ul').hide();
$(".sub-menu a").click(function() {
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});

body {
background-color: #fff;
font-size: 14px;
}
nav {
position: relative;
margin: 50px;
width: 360px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
/* Sub Menu */
}
nav ul li a {
display: block;
background: #ebebeb;
padding: 10px 15px;
color: #333;
text-decoration: none;
-webkit-transition: 0.2s linear;
-moz-transition: 0.2s linear;
-ms-transition: 0.2s linear;
-o-transition: 0.2s linear;
transition: 0.2s linear;
}
nav ul li a:hover {
background: #f8f8f8;
color: #515151;
}
nav ul li a .fa {
width: 16px;
text-align: center;
margin-right: 5px;
float: right;
}
nav ul ul {
background-color: #ebebeb;
}
nav ul li ul li a {
background: #f8f8f8;
border-left: 4px solid transparent;
padding: 10px 20px;
}
nav ul li ul li a:hover {
background: #ebebeb;
border-left: 4px solid #3498db;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class='animated bounceInDown'>
<ul>
<li><a href='#profile'>Profile</a></li>
<li><a href='#message'>Messages</a></li>
<li class='sub-menu'><a href='#settings'>Settings<div class='fa fa-caret-down right'></div></a>
<ul>
<li><a href='#settings'>Account</a></li>
<li><a href='#settings'>Profile</a></li>
<li><a href='#settings'>Secruity &amp; Privacy</a></li>
<li><a href='#settings'>Password</a></li>
<li><a href='#settings'>Notification</a></li>
</ul>
</li>
<li class='sub-menu'><a href='#message'>Help<div class='fa fa-caret-down right'></div></a>
<ul>
<li><a href='#settings'>FAQ's</a></li>
<li><a href='#settings'>Submit a Ticket</a></li>
<li><a href='#settings'>Network Status</a></li>
</ul>
</li>
<li><a href='#message'>Logout</a></li>
</ul>
</nav>

Answer 1

在发布HTML 之前，这并不是微不足道的，也是不可能的

我将div更改为span

我不得不将打开/关闭移动到"其他"关闭的完成之外，因为它当然会为每个关闭的切换当前元素

$('.sub-menu ul').hide();
$(".sub-menu a").click(function(e) {
e.stopPropagation()
const $parentLI = $(this).closest("li");
const $other = $parentLI.siblings();
const $myUL = $parentLI.find("ul");
const $myToggle = $(this).find(".right");
$other
.find("ul").slideUp("100")
.find("a span").removeClass("fa-caret-up").addClass("fa-caret-down");
$myUL.slideToggle("100");
$myToggle.toggleClass("fa-caret-up fa-caret-down");
});

body {
background-color: #fff;
font-size: 14px;
}
nav {
position: relative;
margin: 50px;
width: 360px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
/* Sub Menu */
}
nav ul li a {
display: block;
background: #ebebeb;
padding: 10px 15px;
color: #333;
text-decoration: none;
-webkit-transition: 0.2s linear;
-moz-transition: 0.2s linear;
-ms-transition: 0.2s linear;
-o-transition: 0.2s linear;
transition: 0.2s linear;
}
nav ul li a:hover {
background: #f8f8f8;
color: #515151;
}
nav ul li a .fa {
width: 16px;
text-align: center;
margin-right: 5px;
float: right;
}
nav ul ul {
background-color: #ebebeb;
}
nav ul li ul li a {
background: #f8f8f8;
border-left: 4px solid transparent;
padding: 10px 20px;
}
nav ul li ul li a:hover {
background: #ebebeb;
border-left: 4px solid #3498db;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<nav class='animated bounceInDown'>
<ul>
<li><a href='#profile'>Profile</a></li>
<li class='sub-menu'><a href='#settings'>Messages<span class='fa fa-caret-down right'></span></a>
<ul>
<li><a href='#settings'>Message 1</a></li>
<li><a href='#settings'>Message 2</a></li>
<li><a href='#settings'>Message 3</a></li>
</ul>
</li>
<li class='sub-menu'><a href='#settings'>Settings<span class='fa fa-caret-down right'></span></a>
<ul>
<li><a href='#settings'>Account</a></li>
<li><a href='#settings'>Profile</a></li>
<li><a href='#settings'>Secruity &amp; Privacy</a></li>
<li><a href='#settings'>Password</a></li>
<li><a href='#settings'>Notification</a></li>
</ul>
</li>
<li class='sub-menu'><a href='#message'>Help<span class='fa fa-caret-down right'></span></a>
<ul>
<li><a href='#settings'>FAQ's</a></li>
<li><a href='#settings'>Submit a Ticket</a></li>
<li><a href='#settings'>Network Status</a></li>
</ul>
</li>
<li><a href='#message'>Logout</a></li>
</ul>
</nav>