Раскрывающееся меню Открытая ширина JQuery

Question

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

Как это сделать, чтобы исправить ошибку preventDefault?

Меню HTML:

<nav class="main-menu"> 
    <ul id="" class="menu"> 

     <li> 
      <a href="http://www.google.com" target="_blank">Menu One</a> 
      <div class="sub-menu"> 
       <ul> 
        <li><a href="http://www.google.uk" target="_blank">test test test</a></li> 
        ... More links ... 
       </ul> 
      </div> 
     </li> 

     ... More items ... 

    </ul> 
</nav> 

Это часть кода

$('.main-menu li a').click(function(event) {   
    event.preventDefault(); 
    $('.main-menu').find('.sub-menu').removeClass('open'); 
    $(this).parent().find('.sub-menu').addClass('open'); 
}); 

Пример виден здесь JSFIDDLE

Answer 1

Просто удалите

$('.main-menu').find('.sub-menu').removeClass('open'); 

Here is a fiddle you can check out

Answer 2

Избавьтесь от event.preventDefault();

Вместо этого сделать, как

<a href="#" onclick="return false"> 

Затем дать каждому главному меню имя класса. И вызовите событие click этого класса.

https://jsfiddle.net/btevfik/9m9rufqx/3/

Answer 3

Вы можете заменить селектор с более целенаправленный (.menu > li > a):

$('.menu > li > a').click(function(event) {   
    event.preventDefault(); 
    $('.sub-menu.open').removeClass('open'); 
    $(this).parent().find('.sub-menu').addClass('open'); 
}); 

JSFiddle