Question

我已经使用布尔玛实现了导航栏，但是在用户单击导航栏内的元素后，很难将其关闭。我只有一个页面设置，因此页面不会刷新，因此导航栏不会“重置”并关闭。

很抱歉，如果答案很明显或很简单，我对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');

        });
      });
    }
});

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

Answer 1

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

或者您指定一个侦听click事件的父元素，并检查其中的被单击目标是否具有类.navbar-burger。例如：

.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'); } }); } });，但我建议您更加具体。因为您网站上的每次点击都会进入此事件，并检查它是否是导航对象。但是，重新连接侦听器的第一种方法是更好的做法。

在JavaScript中点击关闭下拉导航栏？

1 个答案: