javascript - jQuery multi level selector for hover event -
i have multi level menu structured this:
<div id="outer_div"> <div id="menu_liv0" class="menu"> <ul> <li><a href="#" data-id="125" data-liv="0">text</a></li> <li><a href="#" data-id="184" data-liv="0">text</a></li> <li><a href="#" data-id="240" data-liv="0">text</a></li> </ul> </div> <div id="menu_liv1" class="menu"> <ul> <li><a href="#" data-id="430" data-liv="1">text</a></li> <li><a href="#" data-id="307" data-liv="1">text</a></li> <li><a href="#" data-id="652" data-liv="1">text</a></li> </ul> </div> <div id="menu_liv2" class="menu"> <ul> <li><a href="#" data-id="410" data-liv="2">text</a></li> <li><a href="#" data-id="174" data-liv="2">text</a></li> <li><a href="#" data-id="921" data-liv="2">text</a></li> </ul> </div> </div>
i'd use jquery handle hover event of li (or a) display second level of menu can't figure out how it. tried both way , children("li").children("a") method without success.
$("#menu_liv0 > ul > li").on("mouseenter", function(){ //function populates second level of menu goes here $("#menu_liv1").css("display", "block"); }); $("#menu_liv0 > ul > li").on("mouseleave", function(){ $("#menu_liv1").css("display", "none"); });
make "on" "live". had done small example,please https://jsbin.com/yeliqoroje/edit?html,js,output
Comments
Post a Comment