jQuery - как ограничить область обработчика события

Question

Я создал меню и имеет несколько пунктов меню. Щелчок по каждому пункту меню вызовет эффект понижения. Проблема здесь в том, что когда я нажимаю первый пункт меню, второй пункт меню также имеет эффект понижения. Итак, как мне изменить jQuery? Заранее спасибо! Адрес: html-код.

  <nav> 
       <ul class="category"> 
        <li ><a href="" >News</a> 
         <div class="menu_container"> 
          <ul class="menu"> 
           <li>World News</li> 
           <li>Business News</li> 
           <li>Weather News</li> 
          </ul> 
         </div> 
        </li> 
        <li><a href="">Sports</a> 
         <div class="menu_container"> 
          <ul class="menu"> 
           <li>World News</li> 
           <li>Business News</li> 
           <li>Weather News</li> 
          </ul> 
         </div> 
        </li> 

       </ul> 
     </nav> 

Это jQuery.

$(document).ready(function(){ 
var $menuHeight=$('.menu').height(),menuOpen=false; 
$('.category li>a').click(function(event){ 

    event.preventDefault(); 
    $(this).toggleClass('triRotation'); 
    if(!menuOpen){ 
     $('.menu_container').height($menuHeight); 

     menuOpen=true; 
    } 
    else{ 
     $('.menu_container').height(0); 

     menuOpen=false; 
    } 
});}); 

Answer 1

вы можете получить DIV рядом с щелкнул пункт меню с .next() и вместо того, чтобы использовать переменный, чтобы знать, если меню его видимое я хотел бы использовать это («:visible»)

Demo

$(function() { 
    $('.category li>a').click(function(event) { 
    event.preventDefault(); 
    $(this).toggleClass('triRotation'); 

    var $menuContainer = $(this).next("div"); 

    if ($menuContainer.is(":visible")) { 
     $menuContainer.hide(); 
    } else { 
     $menuContainer.show(); 
    } 
    }); 
});