次のulクラスを切り替えるには？

Question

ネストされたサブメニューを開いたり閉じたりしようとしていますが、3つまたは4つのレベルのネストされたulがありますが、すべて閉じられていますが最初のものは閉じられています。要素をクリックすると、次のulが開き、表示/非表示を切り替える必要があります。その下のjsは、私が探しているものを完全に達成していません。

CSS

.closed { 
    display: none; 
} 

.opened { 
    display: block; 
} 

HTMLのjsをしようと

<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> 

：

$("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")を使用する必要がありますボタンのすぐ次の要素はです。また、次のようにクラスを切り替える方法としてtoggleClassを使用することができます。

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