一页网站的汉堡切换菜单

Posted 2023-05-08

【中文标题】一页网站的汉堡切换菜单

【英文标题】：Hamburger toggle menu for one page site

【发布时间】：2018-05-18 12:01:21

【问题描述】：

我正在使用 jQuery 和引导库开发一个超级简单的网站，但我希望菜单项跳转到该部分（已经使用锚点完成）。但是当我导航回顶部时，菜单下拉菜单仍然打开。如何设置一个切换开关，使其在单击菜单项时关闭？

这是我的初始代码：

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

非常感谢任何帮助。谢谢。

【问题讨论】：

您能否分享您的代码以便我们为您提供帮助

Click outside menu to close in jquery的可能重复

什么是.cross .menu .hamburger？您也可以显示您的html代码吗？只需编辑您的问题。无需再发帖。

【参考方案1】：

任何进入文档的内容都会隐藏下拉菜单

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

下拉列表中的点击不会使其超出下拉列表本身

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

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