jQuery Arrays on a menu -
i'm using html structure similar this
<ul class="top-level"> <li><a href="#"></a> <ul class="dropdown"> <li><a href="#"></a> </li> <ul> <li> </ul> with jquery this
$(".top-level").on("click", "a", function() { $(this).next("ul.dropdown").toggle(); // show / hide corresponding sub-menu }); except after clicking on 1 link bring down dropdown, when click on top-level link bring down dropdown, first dropdown doesn't disappear. there way select other elements in .dropdown except 1 want , ask them hide themselves?
thanks in advance
$(".top-level").on("click", "a", function() { var thedrop = $(this).next("ul.dropdown"); //convert dropdown in question var thedropstate = thedrop.is(':visible'); //record current state of dropdown $("ul.dropdown").hide(); //hide dropdowns if(!thedropstate){ thedrop.show(); } //if state invisible, show dropdown }); this method stateless , set correct conditions every time. using toggle risk doing things $('ul.dropdown').toggle(); causing drop-downs show @ once.
Comments
Post a Comment