jQuery targeting nested list

Question

What I'm trying to achieve at first is to test if an "li" has an "ul" nested within, and if so, to show the nested "ul" on click. this is working well; HOWEVER, the if statement is returning true for every "li" not just the ones that have a child "ul". this means the links without submenus don't work, since e.preventDefault() gets invoked.

Thanks for help!

$('.main_nav').on('click', 'a', function(e) {
		if( $(this).parent().has('ul') ) {
			e.preventDefault();
			$(this).parent().children('ul').toggle( 800, 'easeOutQuint', function() {
				 $(this).closest('li').toggleClass('open dropdown');
    		}).closest('li').siblings('.open').toggleClass('open dropdown').children('ul').hide('fast');
		}
	});

 <nav class="main_nav" role="navigation" aria-label="Primary Menu">
        <ul id="menu-main" class="menu"><li id="menu-item-7" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-7"><a href="http://projectbiketech.dev/">Home</a></li>
<li id="menu-item-22" class="dropdown menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-22"><a href="http://projectbiketech.dev/about/">About</a>
<ul class="sub-menu">
	<li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://projectbiketech.dev/about/team/">Team</a></li>
	<li id="menu-item-60" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60"><a href="http://projectbiketech.dev/about/board-of-directors/">Board of Directors</a></li>
	<li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59"><a href="http://projectbiketech.dev/about/advisory-board/">Advisory Board</a></li>
	<li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58"><a href="http://projectbiketech.dev/about/friends-of-pbt/">Friends of PBT</a></li>
</ul>
</li>
<li id="menu-item-25" class="dropdown menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-25"><a href="http://projectbiketech.dev/programs/">Programs</a>
<ul class="sub-menu">
	<li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="http://projectbiketech.dev/programs/bike-tech-in-school/">Bike Tech In School</a></li>
</ul>
</li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://projectbiketech.dev/chapters/">Chapters</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://projectbiketech.dev/media/">Media</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://projectbiketech.dev/support/">Support</a></li>
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="http://projectbiketech.dev/contact/">Contact</a></li>
</ul>    </nav><!-- .main_navigation -->

You are using jQuery has selector wrongly. Guess you want to check if parent contains any nested UL? You would have to explain what behavior you want to achieve: once you click and toggle submenu, what happens if you click other links, or same link? You are also mixing script and styles, adding styles, but hiding elements... think you started wrong way in general. — skobaljic
– skobaljic, Commented Sep 6, 2016 at 20:02

skobaljic · Accepted Answer · 2016-09-06 20:17:39Z

The basic way to toggle submenu via script would be:

$('a').on('click', function(e){
    var thisLink = $(this);
    var subMenu = thisLink.siblings('ul');
    if( subMenu.length>0 ) {
    	subMenu.slideToggle();
        return false;
    };
});

ul ul {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
        <ul>
            <li><a href="#">Team</a></li>
            <li><a href="#">Directors</a></li>
        </ul>
    </li>
    <li><a href="#">Programs</a>
        <ul>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
        </ul>
    </li>
</ul>

The jQuery has selector you tried to use has something else to do:

Description: Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.

If you want to check if element is a parent of some ul, than you should do it this way:

 if( $element.find('ul').length>0 ) { .. do .. };

For your specific case, you would use:

 if( $(this).parent().find('ul').length>0 ) { .. it has some nested list ..};

Mike Brant · Accepted Answer · 2016-09-06 20:08:58Z

0

You have the problem of a truthy value being populated into your conditional. has() does not return a boolean value, it returns a filtered jQuery collection based on the selector specified. You can use length to investigate the size of collection (which could be 0).

Example:

if( $(this).parent().has('ul').length > 0 ) {

You might, as an alternative, consider specifying a different class to use to enforce this behavior as well. That would allow you to only attach this on click "override" behavior on those particular a tags of the given class. This would perform better than repeated DOM queries and traversal.

answered Sep 6, 2016 at 20:08

Mike Brant

71.4k10 gold badges102 silver badges104 bronze badges

1 Comment

d.b Over a year ago

Thanks for such quick and correct responses! I changed .has('ul') to .has('ul').length > 0 , but the .find method worked as well. thanks again!!

Collectives™ on Stack Overflow

jQuery targeting nested list

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related