jquery - 单击关闭嵌套的 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。