Dropdown Menu Open width Jquery

Question

I have a problem with a drop down menu that must remain open to the click. After the menu is open, you can click the link inside and the menu item just clicked.

How can I do to remedy the preventDefault ?

Menu 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>

This is a portion of code

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

An example is visible here JSFIDDLE

Answer 1

Just remove

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

Here is a fiddle you can check out

Answer 2

Get rid of event.preventDefault();

Instead do like this

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

Then give each main menu a class name. And call the click event on that class.

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

Answer 3

You can replace your selector with a more targeted ( .menu > li > a ) :

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

JSFiddle