Javascript Hinzufügen von Styling zu Element mit der gleichen Klasse

Question

Ich mache ein Dropdown-Menü in einem Dropdown-Menü, ich möchte, dass ich ein paar Kopf-Elemente haben und wenn Sie auf eines klicken, wird das Dropdown in diesem Kopfelement als Blockelement angezeigt. Aber das Problem ist, dass sie alle die gleiche Klasse haben und wenn ich eine Klasse hinzufügen möchte, bekommen alle Dropdowns innerhalb der Hauptelemente diese Klasse. Was mache ich hier falsch?

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>

Weiß jemand, warum dies geschieht und wie dieses Problem zu beheben?

Answer 1

Sie haben den Code Blick auf die spezifischen UL in Bezug auf den Punkt zu machen, haben Sie angeklickt.

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; 
    } 
    }); 
});