jquery - Open sub and sub-submenu on click -
my javascript working submenu, not sub-submenu: should hidden until click "season", opens (slides down) under parent item.
html & javascript:
$('#main-menu > ul > li:has(.dropdown-menu)').addclass('sub').on('click', function(event) { if ($(event.target).parents('ul.dropdown-menu').length > 0) { event.stoppropagation(); } else { event.preventdefault(); } $(this).find('ul').slidetoggle(); }); $('#main-menu > ul > ul > li:has(.dropdown-menu-2)').addclass('sub').on('click', function(event) { if ($(event.target).parents('ul.dropdown-menu-2').length > 0) { event.stoppropagation(); } else { event.preventdefault(); } $(this).find('ul').slidetoggle(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="main-menu"> <ul> <li><a href="http://piirissaareturism.ee/">home</a> </li> <li><a href="http://piirissaareturism.ee/kasulik-info/">information</a> <ul class="dropdown-menu"> <li><a href="http://piirissaareturism.ee/kasulik-info/toitlustus">season</a> <ul class="dropdown-menu-2"> <li><a href="http://piirissaareturism.ee/kasulik-info/toitlustus">winter</a> </li> <li><a href="http://piirissaareturism.ee/kasulik-info/majutus">spring</a> </li> </ul> </li> <li><a href="http://piirissaareturism.ee/kasulik-info/majutus">food</a> </li> </ul> </li> <li><a href="http://piirissaareturism.ee/meist/">contact</a> </li> </ul> </div>
take jsfiddle
update: common quys, there, need find out, why .find('a')
(take linkinted solution) affects anchors, not "information" , "seasons"! please!
using find('ul')
trigger all lists inside element.
so instead, use children('ul')
.
further, clicking 'seasons' closes first level submenu instead of opening second level submenu. can fix binding click event on a
.
$('#main-menu > ul > li:has(.dropdown-menu)').addclass('sub').find('a').on('click', function(event) { if ($(event.target).parents('ul.dropdown-menu').length > 0) { event.stoppropagation(); } else { event.preventdefault(); } $(this).parent().children('ul').slidetoggle(); }); $('#main-menu > ul > ul > li:has(.dropdown-menu-2)').addclass('sub').on('click', function(event) { if ($(event.target).parents('ul.dropdown-menu-2').length > 0) { event.stoppropagation(); } else { event.preventdefault(); } $(this).find('ul').slidetoggle(); });
Comments
Post a Comment