如何切換下一個ul類？

Question

我想打開/關閉嵌套的子菜單，我有三個或四個級別的嵌套ul s都是封閉的，但第一個。當我開始點擊元素時，下一個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"); 
});