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

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>