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