Remove link on parent li only with jQuery -
i have created following code nested ul shows , hides jquery when click on parent li.
the problem markup generated dynamically, , disable anchor links on parent links only, , have links in nested ul list active.
i have tried return false, disables links. how can disable parent li's?
also menu should not expand/collapse when child li's clicked.
i have following markup....
<nav class="shop-cat"> <ul id="menu-shop-categories" class="menu"> <li><a href="">clothing</a> <ul class="sub-menu"> <li><a href="">t-shirts</a></li> <li><a href="">sweatshirts</a></li> <li><a href="">hoodies</a></li> </ul> </li> <li><a href="">art</a> <ul class="sub-menu"> <li><a href="">canvas</a></li> <li><a href="">prints</a></li> </ul> </li> <li><a href="">accessories</a> <ul class="sub-menu"> <li><a href="">glasses</a></li> <li><a href="">keyrings</a></li> </ul> </li> </ul> </nav> with jquery...
$('#menu-shop-categories > li').click(function() { $(this).find('.sub-menu').slidetoggle(400); return false; }); here codepen also... http://codepen.io/anon/pen/ieihc
set click on anchor instead of li
$('#menu-shop-categories > li > a').click(function(e) { e.preventdefault(); $(this).siblings('.sub-menu').slidetoggle(400); });
Comments
Post a Comment