Question

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

我试图通过点击链接隐藏div，但它不起作用。您可以在http://jsfiddle.net/sevoug/2bd4z1k4/

尝试演示链接

jQuery和HTML ：

＆＃13;

$("#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();
});

＆＃13;

<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>

＆＃13;

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/

单击关闭嵌套div ul li

2 个答案: