내부 링크가 null 오류를 반환하고 자바 스크립트에서 실수를 찾을 수 없습니다. 외부 링크가 제대로 작동합니다.

Question

웹 사이트를 설정하고 멋진 탐색을 시도했습니다. 복사 한 내용은 http://codepen.io/arjancodes/pen/jErbyM에서 약간 수정했습니다. (나에게 영감을 주셔서 감사합니다!)

이 내 사이트입니다

davidgoossens.com

HTML 및 CSS 잘 작동하지만, 내부 링크

(당신이 아래의 탐색을 열 때 오른쪽) 404를 반환 유지 . 내 웹 호스팅은 어떤 실수가 JS에 있어야 나에게 말했다 :

var nav = document.querySelector('.material-menu-wrapper'); 
var circle = document.querySelector('.material-btn'); 
var link = document.querySelector('.material-content').querySelectorAll('li'); 
var ham = document.querySelector('.material-hamburger'); 
var main = document.querySelector('.content-fade'); 



var win = window; 

function openMenu(event) { 
    nav.classList.toggle('active'); 
    circle.classList.toggle('active'); 
    ham.classList.toggle('material-close'); 
    main.classList.toggle('active'); 
    for (var i = 0; i < link.length; i++) { 
    link[i].classList.toggle('active'); 
    } 
    event.preventDefault(); 
    event.stopImmediatePropagation(); 
} 

function closeMenu() { 
    if (circle.classList.contains('active')) { 
    circle.classList.remove('active'); 
    for (var i = 0; i < link.length; i++) { 
     link[i].classList.toggle('active'); 
    } 
    ham.classList.remove('material-close'); 
    main.classList.remove('active'); 
    nav.classList.remove('active'); 
    } 
} 


circle.addEventListener('click', openMenu, false); 
circle.addEventListener('touchstart', openMenu, false); 
win.addEventListener('click', closeMenu, false); 
win.addEventListener('touchstart', closeMenu, false);`  

이 당신이 날은이 문제를 해결하는 데 도움 수 있다면

<div class="material-menu-wrapper"> 
    <div class="material-menu"> 
    <div class="material-btn"> 
     <div class="material-hamburger"> 
     <div class="material-patty"></div> 
     <div class="material-patty"></div> 
     <div class="material-patty"></div> 
     </div> 
    </div> 
    <div class="material-content"> 
     <nav> 
     <ul> 
      <li><a href="http://davidgoossens.com/thesen.html">Thesenpapier</a></li> 
      <li><a href="http://davidgoossens.com/motivation.html">Motivation</a></li> 
      <li><a href="http://davidgoossens.com/work.html">Arbeitsproben</a></li> 
      <li><a href="http://davidgoossens.com/cv.html">CV</a></li> 

     </ul> 
     </nav> 
    </div> 
    </div> 
</div> 

이 좋은 것 내 탐색의 HTML입니다!

안부

데이비드

Answer 1

귀하의 문제는 clickdelay.js에이 코드

$(function(){ // DOM READY shorthand 

    $('li').click(function (e) { 

    e.preventDefault(); 
    var goTo = this.getAttribute("href"); 


    //< do something 

    //do something > 


    setTimeout(function(){ 
     window.location = goTo; 
    },500); 

    }); 
}); 

this가 li 요소가 아닌 링크입니다. li의 href를 얻으려고하면 오류가 발생하고 goTo은 null입니다. 그렇다면 window.location = null;입니다. 앵커 태그 인 자식 요소 href을 가져와야합니다.