时间戳

首页 > 解决方案 > 在 JavaScript 中单击时关闭下拉导航栏？

javascript - 在 JavaScript 中单击时关闭下拉导航栏？

问题描述

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

对不起，如果答案很明显或简单，我对 JavaScript 很陌生。我附上了下面的代码片段。

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');

        });
      });
    }
});

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

标签： javascripthtmlbulma

解决方案

当元素被添加到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了，但我建议您更具体。因为您网站上的每次点击都会进入此事件并检查它是否是导航事件。但是，重新连接侦听器的第一个选项是更好的做法。

推荐阅读