次のulにクラスを追加して削除するには？

Question

Following my previous question答えが受け入れられたところ、私は今、htmlが次のような別の状況にあります。その親アンカー子にJSを動作していない

HTML

<ul> 
    <li><a href="">Text</a> 
    <ul class="closed"> 
     <li><a href="">Two</a> 
      <ul class="closed"> 
       <li><a href="">Three</a> 
       <ul class="closed"> 
        <li><a href="">Four</a></li> 
       </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

CSS

.closed { 
    display: none; 
} 

.opened { 
    display: block; 
} 

をクリックしながら、私は何をしようとしていることは同じ、オープン/クローズネストされたULSです私は試みた：

$("a").on("click", function(e) { 
    e.preventDefault(); 
    $(this).parent().next("ul").toggleClass("closed opened"); 
}); 

何も起こらず、エラーもありません。

Answer 1

これは、クラスの優先順位がスタイル属性よりも低いためです。私のCSSの順序を切り替える：

.opened { 
    display: block; 
} 

.closed { 
    display: none; 
}