Javascript 单击一个项目后，如何关闭汉堡包菜单？_Javascript_Jquery_Html_Css_Hamburger Menu

Javascript 单击一个项目后，如何关闭汉堡包菜单？

javascript jquery html css

Javascript 单击一个项目后，如何关闭汉堡包菜单？,javascript,jquery,html,css,hamburger-menu,Javascript,Jquery,Html,Css,Hamburger Menu,单击汉堡按钮后无法关闭菜单。单击任何项目后，关闭整个菜单屏幕的最佳方式是什么我的HTML是： `<body> <div class="menu-wrap"> <input type="checkbox" class="toggler"> <div class="hamburger"> <div></div> </div> <div class="menu"&

单击汉堡按钮后无法关闭菜单。单击任何项目后，关闭整个菜单屏幕的最佳方式是什么

我的HTML是：

`<body>
  <div class="menu-wrap">
    <input type="checkbox" class="toggler">
    <div class="hamburger">
      <div></div>
    </div>
    <div class="menu">>
      <div>
        <div>
          <ul>
            <li><a href="#Home">Home</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>`

或者如果有更简单的方法使用CSS关闭菜单

下面是要运行的代码笔：

此菜单样式适用于输入复选框情况。如果选中，则显示汉堡菜单，否则隐藏。所以我们只需要改变现状

在脚本中编写了一个函数

function toggle(){
    $(".toggler").prop("checked", false);
}

然后将此函数设置为菜单列表的onclick事件

<li><a onclick="toggle()" href="#Home">Home</a></li>
 <li><a onclick="toggle()" href="#About">About</a></li>
 <li><a onclick="toggle()" href="#">Menu</a></li>
 <li><a onclick="toggle()" href="#">Contact</a></li>

如果您想使用vanilla js，我建议您使用CustomEvents。在React这样的框架中，可能还有其他方法

对于每个菜单项，我都会发出一个自定义事件-

var menuItems = document.querySelectorAll('.menu li');

for (var i = 0; i < menuItems.length; ++i) {
  menuItems[i].addEventListener('click', function(e) {
    var closeEvent = new CustomEvent('closeMenu', {
      bubbles: true,
    });
    e.currentTarget.dispatchEvent(closeEvent);
  });
}

您可以使用常用的菜单“切换器”在单击菜单时打开和关闭菜单

更新： 我觉得事情不是很清楚。所以我在这里添加了一些示例代码。注意：我添加了切换程序，随后稍微更改了菜单eventHandler

var menuItems=document.querySelectorAll（'.menu li'）；
对于（变量i=0；i


菜单{
背景色：白色；
显示：内联块；
右侧填充：1rem；
}
.菜单.打开{
能见度：可见；
}
.菜单{
可见性：隐藏；
}







我猜$（'.menu'）.removeClass（'open'）你可以创建一个jsfiddle吗这里的jsfiddle@chağrı没有添加javascript。我不确定我的css是否与之冲突。@adiesman217现在我理解了你在小提琴中的意思，并更新了我的答案。你可以检查一下，我试过使用你的代码，但仍然不起作用。我相信我的CSS可能与之冲突。你介意检查我的代码吗：@ladiesman217我用代码片段更新了上面的答案。希望这有助于重现结果。
var menuItems = document.querySelectorAll('.menu li');

for (var i = 0; i < menuItems.length; ++i) {
  menuItems[i].addEventListener('click', function(e) {
    var closeEvent = new CustomEvent('closeMenu', {
      bubbles: true,
    });
    e.currentTarget.dispatchEvent(closeEvent);
  });
}

var menu = document.querySelector('.menu')
if (menu) {
  menu.addEventListener('closeMenu', function (e) {
    e.currentTarget.classList.remove('open');
  });
}