一页网站的汉堡包切换菜单

Question

我正在使用jQuery和bootstrap库开发一个超级简单的网站，但我希望菜单项跳至该部分（已经使用锚定了）。 但是，当我导航回顶部时，菜单下拉菜单仍处于打开状态。 我如何设置一个切换开关，使其在单击菜单项时关闭？

这是我的初始代码：

$( document ).ready(function() {
  $( ".cross" ).hide();
  $( ".menu" ).hide();
  $( ".hamburger" ).click(function() {
    $( ".menu" ).slideToggle( "slow", function() {
      $( ".hamburger" ).hide();
      $( ".cross" ).show();
    });
  });
  $( ".cross" ).click(function() {
    $( ".menu" ).slideToggle( "slow", function() {
      $( ".cross" ).hide();
      $( ".hamburger" ).show();
    });
  });
});



<button class="hamburger">&#9776;</button>
<button class="cross">&#735;</button>

<div class="menu">
<ul>
<a href="#"><li>Home</li></a>
<a href="#about"><li>Jeff Anderson</li></a>
<a href="#"><li>Hand Built Frames</li></a>
<a href="#"><li>Bike Repairs and Maintenance</li></a>
<a href="#"><li>Frames and Accessories</li></a>
  <a href="#"><li>Contact</li></a>
</ul>
</div>
</div>

任何帮助，不胜感激。 谢谢。

Answer 1

到达文档的所有内容都会隐藏下拉列表

$(document).click(function(){
  $("#dropdown").hide();
});

下拉菜单中的点击不会使其超出下拉菜单本身

$("#dropdown").click(function(e){
  e.stopPropagation();
});

我相信添加这些代码将解决您的问题。