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更改为跨度

我不得不将打开/关闭位置移到“其他”关闭位置的外面，因为它当然会彼此切换当前元素

$('.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>

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

1 个答案: