javascript - 单击时隐藏 <nav>

Question

为客户创建了一个小导航，可以打开“站点地图”样式的链接，这与过去的菜单后菜单很流行，而且效果很好。

点击打开，鼠标离开 div 后隐藏。但是，现在我遇到了一个问题，因为我们已经为该导航引入了 anchor 链接。只有在鼠标离开后它才会消失，页面将转到导航后面请求的 anchor 链接，但在鼠标离开之前不会消失。

我想我可以只添加一条线来在点击时移动它，但这没有任何作用。我改变了使背景变红的 Action ，只是为了确保它正在触发并且确实如此，但它只是不想像其他人那样调整顶部(我隐藏的方式)。希望有人可以看看并告诉我我缺少什么!谢谢大家

这是javascript

$(document).ready(function () {
$("#nav_hover").click(function () {
    setTimeout(function () {
        $("#nav_features #nav_expanded_nav.expanded_nav").css("top", "95px");
    }, 20);
});
$("#nav_hover").mouseleave(function () {
    setTimeout(function () {
        $("#nav_features #nav_expanded_nav.expanded_nav").css("top", "-800px");
    }, 800);
});

});

这里是“扩展导航”的导航栏:

<nav id="main_nav">
 <ul>
  <a id="nav_hover">
  <li>Nav Option</li>
  </a>
 </ul>
</nav>

这是展开的导航栏，我想在点击时隐藏它:

<nav id="nav_expanded_nav" class="expanded_nav">
 <ul class="main_catagory_nav">
  <h1>Heading</h1>
  <p>Description</p>
   <li><a href="http://www.theplace.com/link.shtml#anchor">Link 1</a></li>
   <li><a href="http://www.theplace.com/link.shtml#anchor2">Link 2</a></li>
 </ul>
</nav>

这就是我所需要的!

$(document).ready(function () {
$("#nav_hover").click(function () {
    setTimeout(function () {
        $("#nav_features #nav_expanded_nav.expanded_nav").css("top", "95px");
    }, 20);
});
$("#nav_hover").mouseleave(function () {
    setTimeout(function () {
        $("#nav_features #nav_expanded_nav.expanded_nav").css("top", "-800px");
    }, 800);
});
$(".nav_expanded_nav a").click(function () {
    setTimeout(function () {
        $("#nav_features #nav_expanded_nav.expanded_nav").css("top", "-800px");
    }, 20);
});


});

但它什么都不做。如果我将 iut 更改为 .css("background", "red") 它确实会很好地更改该 div 的背景，这至少证实了它是正确的想法。但它不能影响 css 的“顶部”

Answer 1

这是我的尝试:制作 #nav_expanded_nav总是hidden .然后当#nav_hover它的点击改变了visibility至 visible .当在 #nav_expanded_nav 中单击 anchor 标记时将其可见性改回 hidden当用户离开 #nav_expanded_nav 时也会发生同样的情况。 .

CSS:

#nav_expanded_nav {
  visibility: hidden;
}

jQuery:

$(document).ready(function() {
  $("#nav_hover").click(function() {
      $("#nav_expanded_nav").css("visibility", "visible");
  });

  $("#nav_expanded_nav > ul > li > a ").click(function() {
      $('#nav_expanded_nav').css("visibility", "hidden");
  });

  $("#nav_expanded_nav").mouseleave(function(){
     $(" #nav_expanded_nav").css("visibility", "hidden");
  });                                                            
});

查看 example pen 。