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

Answer 2

event.preventDefault（）是罪魁祸首，因为当用户点击时跟随链接是＆＃34;默认＆＃34;链接的行为。

在任何网页上尝试此操作，然后尝试点击链接：

count = 3

您可能希望确保单击的元素是您认为的那样，然后才能阻止默认（）。

将javascript添加到导航组件后，HTML href链接无效

2 个答案: