hopefully small one.
i have 3 level vertical menu. built in wordpress , attempting keep simple before start putting in content , such.
i have got sub menus hide , when click level 1 button, level 2 menu slide down or slide shut (slidetoggle). issue when click third level, second level (parent) slides , third level slides down @ same time. when click second level again, shows second , third still open.
i have added console.log check happening , shows following: enter down down exit down enter up exit up
so see, entering slide down, sliding down , leaving. enters slide up, slides , exits. it's confusing if else. how can both???
i have dropped in codepen if interested. http://codepen.io/anon/pen/pjeevd
(click button 3 , click button 3.4 see third level effect) ideas muchly appreciated.
html
<ul id="menu-header"> <li id="menu-item-192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-192"><a>button 1</a> <ul class="sub-menu"> <li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="">button 1.1</a></li> <li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="">button 1.2</a></li> </ul> </li> <li id="menu-item-158" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-158"><a>button 2</a> <ul class="sub-menu"> <li id="menu-item-159" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-159"><a href="">button 2.1</a></li> <li id="menu-item-160" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-160"><a href="">button 2.2</a></li> </ul> </li> <li id="menu-item-202" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-202"><a>button 3</a> <ul class="sub-menu"> <li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="">button 3.1</a></li> <li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-206"><a href="">button 3.2</a></li> <li id="menu-item-205" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-205"><a href="">button 3.3</a></li> <li id="menu-item-207" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-207"><a>button 3.4</a> <ul class="sub-menu"> <li id="menu-item-204" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-204"><a href="">button 3.4.1</a></li> <li id="menu-item-203" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-203"><a href="">button 3.4.2</a></li> </ul> </li> </ul> </li> <li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="">button 4</a></li> <li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103"><a href="">button 5</a></li> </ul> jquery
$(".menu-item-has-children").click( function(event) { var target = $(this).find('> .sub-menu'); if(target.is(':visible')) { console.log('enter up'); target.slideup(500); console.log('up'); console.log('exit up'); } else { console.log('enter down'); target.slidedown(500); console.log('down'); console.log('exit down'); } }); css
ul { margin: 0px; padding: 0px; list-style-type: none; } .sub-menu { display: none; }
your .menu-item-has-children class assigned <li>. means .sub-menu inside particular <li> contained in , when click "button 3.4", both <li>'s i.e. "button 3.4" , "button 3" triggered causes effect. not sure if explained clearly.
one solution assign .menu-item-has-children <a> , find parent element's .sub-menu, snippet below.
$(".menu-item-has-children").click( function(event) { var target = $(this).parent().find('> .sub-menu'); if(target.is(':visible')) { console.log('enter up'); target.slideup(500); console.log('exit up'); } else { console.log('enter down'); target.slidedown(500); console.log('exit down'); } }); ul { margin: 0px; padding: 0px; list-style-type: none; } .sub-menu { display: none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="menu-header"> <li id="menu-item-192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-192"><a class="menu-item-has-children">button 1</a> <ul class="sub-menu"> <li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="">button 1.1</a></li> <li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="">button 1.2</a></li> </ul> </li> <li id="menu-item-158" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-158"><a class="menu-item-has-children">button 2</a> <ul class="sub-menu"> <li id="menu-item-159" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-159"><a href="">button 2.1</a></li> <li id="menu-item-160" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-160"><a href="">button 2.2</a></li> </ul> </li> <li id="menu-item-202" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-202"><a class="menu-item-has-children">button 3</a> <ul class="sub-menu"> <li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="">button 3.1</a></li> <li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-206"><a href="">button 3.2</a></li> <li id="menu-item-205" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-205"><a href="">button 3.3</a></li> <li id="menu-item-207" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-207"><a class="menu-item-has-children">button 3.4</a> <ul class="sub-menu"> <li id="menu-item-204" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-204"><a href="">button 3.4.1</a></li> <li id="menu-item-203" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-203"><a href="">button 3.4.2</a></li> </ul> </li> </ul> </li> <li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="">button 4</a></li> <li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103"><a href="">button 5</a></li> </ul>
Comments
Post a Comment