First open sub-menu second click go to page

Question

I am trying to create a responsive menu. I want to create the following:

First click open sub-menu second click go to the page. I did create the following Javascript:

$('nav.mainmenu ul li').click(function (e) {
    if ($(this).parent().children('ul').is(':visible') != true) {
        $(this).parent().children('ul').show();
        e.preventDefault();
        return false;
    }
})

When I click one time the sub-menu opens and the href is not working but when I click the second time it still is not going to the page.

The HTML:

<nav class="mainmenu">
<ul id="menu-main-menu" class="menu">
    <li id="menu-item-135" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-135">
        <a href="https://www.vanderwou.bvdodev.nl/tours/">Tours</a>
        <ul class="sub-menu">
            <li id="menu-item-241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-241"><a href="https://www.vanderwou.bvdodev.nl/tours/touringcarverhuur/"><i class="fas fa-chevron-right"></i> Touringcarverhuur</a></li>
            <li id="menu-item-239" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-239"><a href="https://www.vanderwou.bvdodev.nl/tours/events-samenmetdebus/"><i class="fas fa-chevron-right"></i> Events (samenmetdebus)</a></li>
            <li id="menu-item-240" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-240"><a href="https://www.vanderwou.bvdodev.nl/tours/schoolreizen/"><i class="fas fa-chevron-right"></i> Schoolreizen</a></li>
            <li id="menu-item-238" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-238"><a href="https://www.vanderwou.bvdodev.nl/tours/groepsdagtochten/"><i class="fas fa-chevron-right"></i> Groepsdagtochten</a></li>
        </ul>
    </li>
    <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41">
        <a href="https://www.vanderwou.bvdodev.nl/contact/">Contact</a>
    </li>
</ul>
</nav>

So when someone clicks on Tours it should open the sub-menu below it and if the user then clicks Tours again it should go to the page /tours/ .

Thanks for your time!

Answer 1

Use .find(".sub-menu") to find submenu and then check if the submenu is visible show it else redirect to your given url

Demo Code :

 $(".sub-menu").hide(); //hide submenu $('.menu').click(function(e) { //check is submenu is not visible if ($(this).parent().find(".sub-menu").is(':visible').= true) { $(this).parent().find(".sub-menu");show(). //show it e;preventDefault(); return false; } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="menu-main-menu" class="menu"> <li id="menu-item-135" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-135"> <a href="https://www.vanderwou.bvdodev.nl/tours/">Tours</a> <ul class="sub-menu" data-value="avc"> <li id="menu-item-241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-241"><a href="https://www.vanderwou.bvdodev.nl/tours/touringcarverhuur/"><i class="fas fa-chevron-right"></i> Touringcarverhuur</a></li> <li id="menu-item-239" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-239"><a href="https://www.vanderwou.bvdodev.nl/tours/events-samenmetdebus/"><i class="fas fa-chevron-right"></i> Events (samenmetdebus)</a></li> <li id="menu-item-240" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-240"><a href="https://www.vanderwou.bvdodev.nl/tours/schoolreizen/"><i class="fas fa-chevron-right"></i> Schoolreizen</a></li> <li id="menu-item-238" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-238"><a href="https://www.vanderwou.bvdodev.nl/tours/groepsdagtochten/"><i class="fas fa-chevron-right"></i> Groepsdagtochten</a></li> </ul> </li> <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"> <a href="https://www.vanderwou.bvdodev.nl/contact/">Contact</a> </li> </ul>