带多级导航的toggleClass

Question

现在，我正在尝试像Microsoft.com一样操作菜单。 我在切换链接中隐藏的无序列表时遇到问题。 如果您要在这里观察，我会做一个本地提琴

这是HTML标记：

 <nav class="multi-menu">
  <ul>
   <li>
     <a href="#">Link</a>
  <div class="sub-menu">
   <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
   </ul>
  </div>
   </li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
  </ul>
</nav>

这是CSS标记：

 .multi-menu, .sub-menu {
  background: #34495e;
 }

 .multi-menu li {
  display: inline-block;
 }

 .multi-menu li a {
  display: block;
  padding: 20px 30px;
  color: white;
  text-decoration: none;
 }

 .sub-menu { 
  position: absolute;
  display: inline-block;
  width: 100%;
 }

 .sub-menu ul li {
  display: block;
  float: left;
  width: 20%;
 }

这是JQuery标记

 $(document).ready(function(){
  $(".multi-menu li a").each(function() {
if ($(this).next().length > 0) {
    $(this).addClass("parent");
   };
})

var menu = $(".multi-menu li a.parent");
 $(".parent").click(function (e){
  e.preventDefault();
 $(this).parent(".sub-menu ul").toggleClass('open');
  });
});

Answer 1

首先，您可以删除div并将sub-menu类直接添加到ul元素中：

<li>
    <a href="#">Link</a>
    <ul class="sub-menu">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</li>

然后在jQuery代码中，使用siblings或next查找与单击的父链接相关的子菜单：

$(".parent").on("click", function (e){
    e.preventDefault();
    $(this).siblings(".sub-menu").toggleClass('open');
});

对于动画可见性效果，可以使用各种jQuery方法，例如：

$(this).siblings(".sub-menu").slideToggle();