page.html이 다른 폴더에있을 때 슬라이드 메뉴가 작동하지 않습니다.

Question

이렇게 한 번 클릭하면 확장되는이 사이드 메뉴가 있습니다. 그것은 내 index.html 페이지 및 루트 폴더에있는 다른 모든 페이지에서 잘 작동합니다.

그러나 폴더 안에있는 페이지를 여는 경우 - 예 : ../blog/page.html 그런 다음 사이드 메뉴가 작동하지 않지만 클릭 할 수는 있지만 밀어 내지 않습니다. 이 페이지는 동일한 CSS 및 JS 시트를 사용합니다.

무엇이 누락 되었습니까?

코드 샘플은 다음과 같습니다.

HTML :

<!-- Menu --> 
       <section id="menu"> 

        <!-- Search --> 
         <section> 
          <form class="search" method="get" action="#"> 
           <input type="text" name="query" placeholder="Search" /> 
          </form> 
         </section> 

        <!-- Links --> 
         <section> 
          <ul class="links"> 
           <li> 
            <a href="#"> 
             <h3>Lorem ipsum</h3> 
             <p>Feugiat tempus veroeros dolor</p> 
            </a> 
           </li> 
           <li> 
            <a href="#"> 
             <h3>Dolor sit amet</h3> 
             <p>Sed vitae justo condimentum</p> 
            </a> 
           </li> 
           <li> 
            <a href="#"> 
             <h3>Feugiat veroeros</h3> 
             <p>Phasellus sed ultricies mi congue</p> 
            </a> 
           </li> 
           <li> 
            <a href="#"> 
             <h3>Etiam sed consequat</h3> 
             <p>Porta lectus amet ultricies</p> 
            </a> 
           </li> 
          </ul> 
         </section> 

        <!-- Actions --> 
         <section> 
          <ul class="actions vertical"> 
           <li><a href="#" class="button big fit">Log In</a></li> 
          </ul> 
         </section> 

       </section> 

JS :

 // Menu. 
     $menu 
      .appendTo($body) 
      .panel({ 
       delay: 500, 
       hideOnClick: true, 
       hideOnSwipe: true, 
       resetScroll: true, 
       resetForms: true, 
       side: 'right', 
       target: $body, 
       visibleClass: 'is-menu-visible' 
      }); 

    // Search (header). 
     var $search = $('#search'), 
      $search_input = $search.find('input'); 

     $body 
      .on('click', '[href="#search"]', function(event) { 

       event.preventDefault(); 

       // Not visible? 
        if (!$search.hasClass('visible')) { 

         // Reset form. 
          $search[0].reset(); 

         // Show. 
          $search.addClass('visible'); 

         // Focus input. 
          $search_input.focus(); 

        } 

      }); 

     $search_input 
      .on('keydown', function(event) { 

       if (event.keyCode == 27) 
        $search_input.blur(); 

      }) 
      .on('blur', function() { 
       window.setTimeout(function() { 
        $search.removeClass('visible'); 
       }, 100); 
      }); 

CSS :

     #header .main ul li > a:before { 
         display: block; 
         height: inherit; 
         left: 0; 
         line-height: inherit; 
         position: absolute; 
         text-align: center; 
         text-indent: 0; 
         top: 0; 
         width: inherit; 
        } 

Answer 1

Alex는 각 html 파일 내에 올바른 경로를 설정해야한다고 설명합니다. 예를 들어, blog/page.html에서 스크립트 경로는 다음과 같습니다. *** ../** assets/js/whatever-your-script-is.js *

모든 스크립트 파일 (쿼리, 응답, 해골, 유틸리티 등).

Answer 2

당신이 배치 할 수있는 방법 자바 스크립트 파일 그리고 CSS는 페이지에로드됩니까? 경로는 html 파일의 위치에 따라 다를 수 있습니다.