jquery - close nested div ul li on click -
when select link drop down want close it.
i tried hide div clicking on link doesn't work. can try demo link here http://jsfiddle.net/sevoug/2bd4z1k4/
jquery , html:
$("#nav-search-context").hover(function () { $("#nav-search-menu").show(); }); $("#nav-search-context").click(function () { $("#nav-search-menu").show(); }); $("#wrapper").focusout(function () { $('#nav-search-menu').hide(); }); $('ul.menu li.work').click(function (e) { $("#nav-search-menu").hide(); $('a.active').html("search work"); $("input.search").focus(); }); $('ul.menu li.jobs').click(function (e) { $("#nav-search-menu").hide(); $('a.active').html("search jobs"); $("input.search").focus(); });
<div id="wrapper" style="width:500px; height:200px; margin-left:auto; margin-right:auto;"> <div id="eol-navigation-search" class=""> <form name="nav_search_form_enhanced" action="/search"> <ul id="nav-eol-search" class="nav-search nav-search-visitor"> <li class="link" id="nav-search-context"> <a class="active" href="javascript:void(0);" id="nav-search-selected">search work</a> <ul class="menu" id="nav-search-menu" style="display:none"> <li class="work"><a href="javascript:void(0);">search work</a></li> <li class="jobs"><a href="javascript:void(0);">search jobs</a></li> </ul> </li> <li class="nav-search-input"> <input type="text" x-webkit-speech="x-webkit-speech" onfocus="" class="search" name="keywords" id="nav-search-keywords" style="width: 279px;"> </li> </ul> </form> </div> </div>
you need use css instead of using jquery. can check here http://jsfiddle.net/2bd4z1k4/10/
#nav-search-context ul{ display:none; } #nav-search-context:hover ul { display:block }
and remove in-line display none css.
Comments
Post a Comment