点击隐藏<nav>

Question

创建了一个小导航为客户端打开‘网站地图’风格的链接，这是流行的，相对于菜单后菜单的过去，它工作得很好。

单击打开，并在鼠标离开div后隐藏。然而，现在我遇到了一个问题，因为我们已经引入了导航的锚链接。只要鼠标离开一次，页面就会到达导航后请求的锚链接，而不是直到鼠标离开。

我想我可以在点击时添加一行来移动它，但这没有任何作用。我改变了动作，使背景红色只是为了确保它是触发和它确实，但它只是不想调整顶部(我隐藏的方式)，因为它做了其他。希望有人能看看，告诉我我错过了什么！谢谢各位

这是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中单击锚标记时，将其可见性更改为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");
  });                                                            
});

看一个示例笔。