单击时隐藏 <nav>

Question

为打开 'site map' 风格的 link 的客户创建了一个小导航，这与过去的菜单后菜单很流行，而且效果很好。

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

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

这是 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);
});

});

这是 'expanded nav' 的导航栏：

<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

的 'top'

Answer 1

这是我的尝试：使 #nav_expanded_nav 始终 hidden。然后当 #nav_hover 单击时将 visibility 更改为 visible。当在 #nav_expanded_nav 中单击锚标记时，将其可见性更改回 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。

单击时隐藏 <nav>

Hide <nav> on click

javascript

jquery

css

hide

nav