On click prevent default on parent with childern

Question

On my responsive dropdown menu I want to be able to do the following when a menu item is clicked:

• If link has no children then functions as normal
• If parent link has children then default is prevented for parent and children are displayed
• The parent and children links now function as normal (i.e. no preventDefault after click to show child items)

The (non-functining) JQuery I've done is below and here is my Fiddle (Edited - simplified the example)

var parentWithChildren = $('region-responsive-nav ul');
//var parentWithChildren = $('region-responsive-nav ul').children('has:ul').length > 0 );

$('.region-responsive-nav ul ul').hide();
//prevent default once
if (parentWithChildren.children('has:ul').length > 0 ) {
      $('.region-responsive-nav ul li').one(function(event) {
        $(this).children('ul').slideToggle();
        event.preventDefault();
      });
}else{
    //open link immediately 
}

See below for the markup. (Since simplified in my edit. Please note that it has two <ul> inside the same <li> and there is not much I can do about this.

<nav class="region-responsive-nav">
    <ul>
        <li>One</li>
        <li>Two
            <ul class="sub">
                <li>Two A</li>
                <li>Two B</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>Three</li>
        <li>Four
            <ul>
                <li>Four A</li>
                <li>Four B</li>
            </ul>
        </li>   
    </ul>
</nav>

I think I'm fairly close (at least in concept) so ainy pointers would be appreciated.

Thanks in advance

Answer 1

Try this event handler to handle onclick for the parent <li>'s:

$('.region-responsive-nav ul li').on('click', function(event) {
    // Check if the <li> has hidden children 
    if ($(this).children('ul:not(:visible)').length > 0) {
        event.preventDefault();
        // Display children
    } else {
        // Normal behaviour
    }
});

This will check whether the <li> has any child <ul> elements that are hidden when it's clicked and you can handle that accordingly.

Keep in mind this event handler will bind to the children <li>'s too. If you only want this behaviour for the first set of <li>'s in your code, use this selector instead: $('.region-responsive-nav > ul > li').

---

UPDATE:

JSFiddle demonstrating this solution based on your updated JSFiddle: https://jsfiddle.net/tadhbb3a/2/

I've made all the list items into links so you can see that the links with children just show the children without sending the user to the link, but those without children work as normal links.

Also as you've clarified in one of your comments you want the parent links that have children visible already to work as normal links, so that's added too.

Answer 2

Okay, it's rudimentary but I think it does what you want:

$(document).ready(function () {
    // Hide the submenus that should be hidden
    $('li > ul').hide();

    // Make the li elements that don't have submenus do something
    $("li:not(:has(ul))").click(function() {
        alert("do something");
    });

    // I used hover to show and hide but any event will do
    // (only for li elements that have submenus)
    $("li:has(ul)").hover(function() {
        $(this).children("ul").slideToggle();
    }, function() {
        $(this).children("ul").slideToggle();
    });
});

See the fiddle