jqueryhtmlwordpressmobileslidetoggle

jQuery breaks links when using slideToggle on mobile nav

I am making a mobile nav menu on my WordPress site. I successfully created the dropdowns and the slide toggle works fine but in the submenus the links are broken. When you click on them nothing happens. In the inspector it has the correct link reference but just won't go on click. On desktop the links work fine.

Below is my jQuery:

jQuery('#menu-main-menu-1 > .menu-item-has-children > .sub-menu').addClass('first-sub');
    jQuery('#menu-main-menu-1 .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu').addClass('last-sub');

    jQuery('#menu-main-menu-1 > .menu-item-has-children a').click(function(){
        jQuery(this).siblings('.first-sub').slideToggle();
        return false;
    });

    jQuery('#menu-main-menu-1 > .menu-item-has-children > .first-sub > .menu-item-has-children a').click(function(){
        jQuery(this).siblings('.last-sub').slideToggle();
        return false;
    });

Below is my HTML code:

<?php wp_nav_menu( array('menu' => 'Main Menu' )); ?>

which translates into an HTML menu with the structure:

<ul id="menu-main-menu-1" class="menu">
        <li class="menu-item"><a href="link1">page1</a></li>
        <li class="menu-item menu-item-has-children"><a href="#">dropdown1</a>
            <ul class="sub-menu first-sub">
                <li class="menu-item"><a href="link2">page2</a></li>
                <li class="menu-item"><a href="link3">page3</a></li>
                <li class="menu-item"><a href="link4">page4</a></li>
            </ul>
        </li>
        <li class="menu-item"><a href="link5">page5</a></li>
        <li class="menu-item"><a href="link6">page6</a></li>
</ul>
Solution

  • I found the solution with help from Karl-AndrĂ© Gagnon. All I had to do was remove the "return false".