Javascript同じクラスの要素にスタイリングを追加する

Question

ドロップダウンメニューにドロップダウンメニューを作っていますが、いくつかのヘッド項目があります。クリックすると、そのヘッド項目のドロップダウンがブロック要素として表示されます。しかし、問題はそれらがすべて同じクラスを持っていることです。クラスを追加する場合は、ヘッドアイテム内のすべてのドロップダウンがそのクラスを取得します。私はここで間違って何をしていますか？

jQuery(document).ready(function(){ 
 
     var click = false; 
 
     jQuery(".navbar-collapse .nav li").click(function() { 
 
    
 
      if(click == false) { 
 
       jQuery(".navbar-collapse .nav li ul").addClass('clicked'); 
 
       click = true; 
 
      } else { 
 
       jQuery(".navbar-collapse .nav li ul").removeClass('clicked'); 
 
       click = false; 
 
      } 
 
     }); 
 
    });

.clicked { 
 
     display: block !important; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav menu"> 
 
     <li class="item-101 default deeper parent"> 
 
       <a href="/">Home</a> 
 
       <ul class="nav-child unstyled small clicked"> 
 
        <li class="item-124"> 
 
         <a href="/home/maandmail">Maandmail</a> 
 
        </li> 
 
       </ul> 
 
     </li> 
 
     <li class="item-102 default deeper parent"> 
 
       <a href="/">Contact</a> 
 
       <ul class="nav-child unstyled small clicked"> 
 
        <li class="item-125"> 
 
         <a href="/home/contact-page">Contact pagina</a> 
 
        </li> 
 
       </ul> 
 
     </li> 
 
    </ul>

これが起こって、どのようにこの問題を解決することですなぜ誰でも知っていますか？あなたが上でクリックした項目に固有のULの相対でのコードを見て確認する必要があり

Answer 1

：

jQuery(document).ready(function() { 
    var click = false; 
    jQuery(".navbar-collapse .nav li").click(function(e) { 
    if (click == false) { 
     jQuery(e.currentTarget).find("ul").addClass('clicked'); 
     click = true; 
    } else { 
     jQuery(e.currentTarget).find("ul").removeClass('clicked'); 
     click = false; 
    } 
    }); 
});