点击关闭嵌套div ul li

Question

当我从下拉列表中选择一个链接时，我想关闭它。

我试图通过点击链接来隐藏div，但它不起作用。 你可以试试这里的演示链接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>

Answer 1

您需要使用CSS，而不是使用jQuery的。你可以在这里检查它http://jsfiddle.net/2bd4z1k4/10/

#nav-search-context ul{ 
    display:none; 
} 
#nav-search-context:hover ul { 
    display:block 
} 

并删除行内显示无css。

Answer 2

你的JavaScript代码是做更多的则需要

$("#nav-search-context a").click(function() { 
    $("#nav-search-menu").show(); 
}); 

$('ul.menu li.workee').click(function() { 
    $("#nav-search-menu").hide(); 
    $('a.active').html("Search Workee"); 
    $("input.search").focus(); 
}); 

$('ul.menu li.jobs').click(function() { 
    $("#nav-search-menu").hide(); 
    $('a.active').html("Search Jobs"); 
    $("input.search").focus(); 
}); 

http://jsfiddle.net/2bd4z1k4/12/