javascript - 在我将 javascript 添加到导航组件后，HTML href 链接不起作用

Question

我有一个使用 html 和 css 创建的简单主导航菜单。当我添加一些 javascript 来处理移动菜单按钮的折叠和切换时，页面上的每个链接都停止工作。

我基于这支笔的导航:https://codepen.io/anon/pen/YQjzzq

(function() {

  // Definition of caller element
  var getTriggerElement = function(el) {
    var isCollapse = el.getAttribute('data-collapse');
    if (isCollapse !== null) {
      return el;
    } else {
      var isParentCollapse = el.parentNode.getAttribute('data-collapse');
      return (isParentCollapse !== null) ? el.parentNode : undefined;
    }
  };

  // A handler for click on toggle button
  var collapseClickHandler = function(event) {
    var triggerEl = getTriggerElement(event.target);
    // If trigger element does not exist
    if (triggerEl === undefined) {
      event.preventDefault();
      return false;
    }

    // If the target element exists
    var targetEl = document.querySelector(triggerEl.getAttribute('data-target'));
    if (targetEl) {
      triggerEl.classList.toggle('-active');
      targetEl.classList.toggle('-on');
    }
  };

  // Delegated event
  document.addEventListener('click', collapseClickHandler, false);

})(document, window);

<nav role="navigation" id="navigation" class="list">
          <a href="http://sitename.se/site/index.html" class="item -link">Hem</a>
          <a href="http://sitename.se/site/vart-boende.html" class="item -link">Vårt Boende</a>
          <a href="http://sitename.se/site/om-vald.html" class="item -link">Om Kvinnovåld</a>
          <a href="http://sitename.se/site/lankar.html" class="item -link">Länkar</a>
          <a href="http://sitename.se/site/engagera-dig.html" class="item -link">Engagera Dig</a>
          <a href="http://sitename.se/site/english.html" class="item -link">English</a>
          <a href="http://sitename.se/site/kontakt.html" class="item -link">Kontakt</a>
        </nav>

        <!-- Button to toggle the display menu  -->
        <button data-collapse data-target="#navigation" class="toggle">
          <!-- Hamburger icon -->
          <span class="icon"></span>
        </button>

Answer 1

目前，这些链接不起作用，因为它们在 JavaScript 的第 19 行阻止了它们的默认行为。如果我对情况的理解正确，您只希望事件监听器应用于可折叠菜单，因此我建议将代码更改为如下内容:

 // Delegated event
document.getElementsByClassName('toggle')[0].addEventListener('click', collapseClickHandler, false);