Question

我正在尝试打开/关闭嵌套的子菜单，我有三个或四个级别的嵌套ul，它们都已关闭，但是第一个。当我开始点击元素时，下一个ul应该打开并切换显示/隐藏。它下面的js没有完全实现我正在寻找的东西。

CSS

.closed {
   display: none;
}

.opened {
   display: block;
}

HTML

<ul>
  <li><button type="button">TOGGLE</button>
     <ul class="closed">
        <li>Two
           <ul class="closed">
              <li>Three
                <ul class="closed">
                   <li>Four</li>
                </ul>
              </li>
           </ul>
         </li>
     </ul>
   </li>
</ul>

尝试js：

$("button").on("click", function(){
   $(this).parent().next("ul").toggle(function()  {
      $(this).removeClass("closed").addClass("opened");
    }, function() {
      $(this).removeClass("opened").addClass("closed");
    });
});

Answer 1

您应该使用$(this).next("ul")而不是$(this).parent().next("ul")，因为ul是该按钮的下一个元素。您可以使用toggleClass方法切换类，如下所示。

$("button").on("click", function(){
    $(this).next("ul").toggleClass("closed opened");
});

如何切换下一个ul类？

1 个答案: