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>

사람은 이런 일이 어떻게이 문제를 해결하는 이유를 알고 있나요?

Answer 1

당신은 클릭 한 항목에 특정 UL 상대의 코드 모양을 만들기 위해 있습니다. 아마 jQuery를 (이) .find ('UL')를 시도

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