Подменю Wordpress не запускается правильно

Question

У меня есть основное вертикальное меню, состоящее из 6 кнопок.

Когда кто-то нажимает кнопку, которая не является подменю, она переходит на эту страницу. Большой!

Если щелкнутая кнопка имеет подменю, подменю соскальзывает и больше ничего не происходит. Когда кто-то нажимает на ссылку в подменю, она переходит к этой ссылке.

Проблема в том, что при нажатии ссылки в подменю она просто скользит и ничего не делает. Я теряю рассудок.

HTML

<ul id="menu-primary" class="menu"> 
    <li id="menu-item-242" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"> 
     <a>Button 1</a> 
     <ul class="sub-menu"> 
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-240"><a href="">Button 1.1</a></li> 
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-238"><a href="">Button 1.2</a></li> 
     </ul> 
    </li> 
    <li id="menu-item-244" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-244"><a>Button 2</a> 
     <ul class="sub-menu"> 
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-236"><a href="">Button 2.1</a></li> 
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-235"><a href="">Button 2.2</a></li> 
      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-234"><a href="">Button 2.3</a></li> 
     </ul> 
    </li> 
    <li id="menu-item-484" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item"><a href="">Button 3</a></li> 
    <li id="menu-item-231" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-231"><a href="">Button 4</a></li> 
    <li id="menu-item-302" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-302"><a href="">Button 5</a></li> 
    <li id="menu-item-230" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-230"><a href="">Button 6</a></li> 
</ul> 

Jquery

$(document).ready(function() { 

    $(".menu-item-has-children").click(function(event) { 
    event.preventDefault(); 
    $(this).find('> .sub-menu').addClass('sub-menu-down').slideToggle(); 
    }); 

}); 

Я также с нетерпением, чтобы сделать так, что если кнопка меню 2 открыта и кто-то нажимает кнопку 1, в меню горок кнопка 2 закрыта, как и перед открытием меню кнопки 1. (Это jsut, куда я направляюсь, если у кого есть идеи).

Mega реквизит и спасибо заранее.

Answer 1

Применение

$(".menu-item-has-children").click(function(event) { 
    event.preventDefault(); 

    //Hide other menus 
    //Find .sub-menu belonging to other menu-item-has-children 
    //thus used .not() and 
    $(".menu-item-has-children").not(this).find('> .sub-menu').slideUp() 

    //Slide this 
    $(this).find('> .sub-menu').addClass('sub-menu-down').slideToggle(); 
}); 

Справочник $.fn.not()

Удалить элементы из набора соответствующих элементов.