javascript - 具有多级导航的 toggleClass

Question

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

这是 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();