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

Answer 2

event.preventDefault（）犯人でありますユーザーがクリックしたときのリンクをたどることは、リンクの「デフォルト」動作であるためです。

は、リンクをクリックしてくださいその後、任意のWebページ上でこれを試してみて：

const f = e => e.preventDefault() 
document.addEventListener('click', f, false) 

あなたはおそらく、あなたはそれだと思うかわからクリックした要素があるようにしたいし、その後だけにしてでpreventDefault（）。