Question

单击汉堡包按钮后关闭菜单时遇到麻烦。单击任何项目后，关闭整个菜单屏幕的最佳方法是什么？

我的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>`

我尝试使用jQuery，但还没有成功。这是js代码：

`$('.toggler').on('click', function () {
    $('.menu').toggleClass('open');
});
$('.menu li').on("click", function () {
    $('.menu-wrap').toggleClass('open');
});`

或者是否有使用CSS关闭菜单的简单方法？

这是要运行的代码笔：https://jsfiddle.net/7rmcx861/#&togetherjs=g5zDdkhjc5

Answer 1

https://jsfiddle.net/h7et0qnv/

此菜单样式适用于输入chechbox的情况。如果选中，则汉堡菜单可见，否则隐藏。所以只需要改变它的状况

在脚本中编写一个函数。

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>

Answer 2

如果您想使用香草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);
  });
}

然后，“菜单”可以对该自定义事件做出反应，并在打开时自动关闭-

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

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

更新：

我认为情况不是很清楚。所以我在这里添加一些示例代码。注意：我添加了切换器，然后稍稍更改了菜单eventHandler。

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')
var toggler = document.querySelector('.toggler')
if (menu && toggler) {
  menu.addEventListener('closeMenu', function(e) {
    menu.classList.remove('open');
    toggler.checked = false;
  });
  toggler.addEventListener('click', function(e) {
    menu.classList.toggle('open');
  });
}

.menu {
  background-color: white;
  display: inline-block;
  padding-right: 1rem;
}

.menu.open {
  visibility: visible;
}

.menu {
  visibility: hidden;
}

<div class="menu-wrap">
  <input type="checkbox" class="toggler" checked>
  <div class="hamburger">
    <div></div>
  </div>
  <div class="menu open">
    <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>

单击项目后如何关闭汉堡菜单？

2 个答案:

更新：