在 JavaScript 中单击时关闭下拉导航栏？答案

【问题标题】：Closing a dropdown navbar on click in JavaScript?在 JavaScript 中单击时关闭下拉导航栏？
【发布时间】：2019-09-28 12:04:36
【问题描述】：

我已经使用 Bulma 实现了一个导航栏，但在用户单击导航栏中的某个元素后我无法关闭它。我有一个单页设置，因此页面不会刷新，因此导航栏不会“重置”并关闭。

对不起，如果答案是显而易见的或简单的，我对 JavaScript 很陌生。我附上了下面代码的sn-p。

document.addEventListener('DOMContentLoaded', () => {
    // Get all "navbar-burger" elements
    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

    // Check if there are any navbar burgers
    if ($navbarBurgers.length > 0) {

      // Add a click event on each of them
      $navbarBurgers.forEach( el => {
        el.addEventListener('click', () => {

          // Get the target from the "data-target" attribute
          const target = el.dataset.target;
          const $target = document.getElementById(target);

          // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
          el.classList.toggle('is-active');
          $target.classList.toggle('is-active');

        });
      });
    }
});

任何帮助将不胜感激，谢谢！

【问题讨论】：

const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); 可以被所有支持=>的浏览器写成const $navbarBurgers = [...document.querySelectorAll('.navbar-burger')]
nav如何正常打开和关闭？
@mplungjan 我认为导航栏元素中添加了一个“活跃”类（来自 Bulma）。那么，也许解决方案可能是在单击元素后删除“is-active”？如果有可能的话。
对不起，我根本不认识布尔玛

标签： javascript html bulma

【解决方案1】：

当元素被添加到 DOM（在您的情况下为 .navbar-burgers）时，您需要重新附加侦听器。您可以将上述 javascript 包装在一个函数中，并在您的网站内容发生更改时再次调用它。

或者你指定一个监听点击事件的父元素并检查它内部的被点击目标是否有一个类.navbar-burger。例如：

document.addEventListener('DOMContentLoaded', () => {

    if (document.querySelector('.navbar-burger')) {
        document.querySelector('body').addEventListener('click', (el) => {
            if (el.currentTarget.classList.contains('.navbar-burger')) {
                // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
                el.classList.toggle('is-active');
                document.getElementById(el.getAttribute('data-target')).classList.toggle('is-active');
            }
        });
    }

});

在此示例中，我指定了body，但我建议您更具体一些。因为您网站上的每次点击都会进入此事件并检查它是否是导航事件。但是，重新连接侦听器的第一个选项是更好的做法。

【讨论】：