Jquery vertical multilevel menu parent li catches mouseclicks of inner ul?

Question

I'm trying to make a vertical multilevel menu for small screens.

I start with adding a css-class called 'hidden to all ul items within a li . I do this with jquery. This class hass the properties visibility:hidden , opacity:0 and height:0

If one clicks on a li with a ul inside, the 'hidden'-class is removed, and a 'active'-class is added (to that ul ). I do this with jquery. This class had the properties visibility:visible , opacity:1 and height:auto .

 $(".menu > li > ul").addClass("hidden"); $(".menu > li > ul > li > ul").addClass("hidden"); $(".menu > li").has("ul").click(function(){ if ( $(this).children("ul").hasClass( "hidden" ) ) { $(this).children("ul").removeClass("hidden"); $(this).children("ul").addClass("active"); } else { $(this).children("ul").removeClass("active"); $(this).children("ul").addClass("hidden"); } }); $(".menu > li > ul > li").has("ul").click(function(){ if ( $(this).children("ul").hasClass( "hidden" ) ) { $(this).children("ul").removeClass("hidden"); $(this).children("ul").addClass("active"); } else { $(this).children("ul").removeClass("active"); $(this).children("ul").addClass("hidden"); } }); 

 <ul class="menu"> <li><a href="#">Home</a></li> <li> <a href="#">About</a> <ul> <li><a href="#">About 1.1</a></li> <li><a href="#">About 1.2</a></li> </ul> </li> <li> <a href="#">Hello</a> <ul> <li><a href="#">Hello 1.1</a></li> <li> <a href="#">Hello 1.2</a> <ul> <li><a href="#">Hello 1.2.1</a></li> <li><a href="#">Hello 1.2.2</a></li> <li><a href="#">Hello 1.2.3</a></li> </ul> </li> <li><a href="#">Hello 1.3</a></li> </ul> </li> </ul> 

All the ul and li items have position:static in css. The a items have position:block.

PROBLEM

If I click on the li About, the ul within About gets shown. However, if I click on li About 1.1, the forementioned ul gets hidden again (it gets assigned the css-class 'hidden').

I think the li About somehow 'catches' the mouseclick (because it's the encompassing parent), making jquery remove the 'active'-class and applying the 'hidden'-class.

How do I fix this?

Answer 1

You need to apply click event to a not directly to entire li

Please check below code:

 $(".menu > li > ul").addClass("hidden"); $(".menu > li > ul > li > ul").addClass("hidden"); $(".menu > li a").click(function(){ if ( $(this).parent().children("ul").hasClass( "hidden" ) ) { $(this).parent().children("ul").removeClass("hidden"); $(this).parent().children("ul").addClass("active"); } else { $(this).parent().children("ul").removeClass("active"); $(this).parent().children("ul").addClass("hidden"); } }); 

 .hidden{display:none} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="menu"> <li><a href="#">Home</a></li> <li> <a href="#">About</a> <ul> <li><a href="#">About 1.1</a></li> <li><a href="#">About 1.2</a></li> </ul> </li> <li> <a href="#">Hello</a> <ul> <li><a href="#">Hello 1.1</a></li> <li> <a href="#">Hello 1.2</a> <ul> <li><a href="#">Hello 1.2.1</a></li> <li><a href="#">Hello 1.2.2</a></li> <li><a href="#">Hello 1.2.3</a></li> </ul> </li> <li><a href="#">Hello 1.3</a></li> </ul> </li> </ul> 

More detail:

If you applies click event on li it it will make visible sub ul li for first time, but when you click on "About 1.1" you are clicking on its parent first.

Please see below image to get idea that, when the menu is open entire li will consider that click event