CODEWITHSUNDEEP
jqueryparentpreventdefault
Bert Murphy
Bert Murphy

Reputation: 37

On click prevent default on parent with childern

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

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

Upvotes: 0

Views: 984

Answers (2)

Martin Charchar
Martin Charchar

Reputation: 181

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.

Upvotes: 1

jcuenod
jcuenod

Reputation: 58415

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

Upvotes: 0

Related Questions