Jquery를 사용하여 드롭 다운 메뉴에 $ this

Question

부모 요소를 클릭 할 때 드롭 다운을 토글하는 드롭 다운 메뉴를 만들고 있습니다. 그러나 현재 항목을 클릭하면 모든 드롭 다운 메뉴가 열립니다. 나는 $ this를 사용해야 할 필요가 있음을 알고 있지만, 그것을 적용 할 곳을 알아낼 수는 없다. 여기

// When the parent element is clicked... 
jQuery('#menu-main li.has-dropdown a').click(function() { 

    // The dropdown will toggle open/close 
    jQuery('#top-bar-wrapper .top-bar.expanded .top-bar-section .dropdown').toggle(); 
}); 

는 HTML입니다 : 여기

현재 코드

<div id="top-bar-wrapper"> 
    <nav class="top-bar expanded"> 
     <section class="top-bar-section"> 
      <ul id="menu-main"> 
       <li><a href="#">No Dropdown</a></li> 
       <li class="has-dropdown"><a href="#">Dropdown Menu</a></li> 
        <ul class="dropdown"> 
         <li><a href="#">Dropdown One</a></li> 
         <li><a href="#">Dropdown Two</a></li> 
         <li><a href="#">Dropdown Three</a></li> 
        </ul> 
       </li> 
       <li><a href="#">No Dropdown 2</a></li> 
       <li class="has-dropdown"><a href="#">Dropdown Menu 2</a></li> 
        <ul class="dropdown"> 
         <li><a href="#">Dropdown One</a></li> 
         <li><a href="#">Dropdown Two</a></li> 
         <li><a href="#">Dropdown Three</a></li> 
        </ul> 
       </li> 
     </section> 
    </nav> 
</div> 

Answer 1

는 사용자가 제공 한 HTML을 감안할 때, 다음 작동합니다 :

$('#menu-main li.has-dropdown > a').off('click').on('click', function() { 
    $(this).closest('li').next('.dropdown').toggle(); 
}); 

Example Here

키는 $(this)을 사용하여 클릭 된 요소의 컨텍스트를 가져 오는 것입니다. 위의 스 니펫은 클릭 된 요소의 부모 인 다음 형제 자매 (dropdown)의 표시 여부를 토글합니다.