헤더 대 바닥 글에서의 JavaScript 충돌

Question

사용하려는 두 개의 javascript 스크립트, 클릭 가능한 드롭 다운 메뉴 및 이미지 슬라이드 쇼용 slick.js가 있습니다. 클릭 할 수있는 드롭 다운 메뉴는 머리글에 배치 된 경우에만 작동하며 바닥 글에 배치 된 경우 매끄러운 경우에만 작동합니다. 둘 다 서로 충돌하여 결국 자바 스크립트 라이브러리가 호출되는 위치에 따라 다른 하나를 재정의합니다. 예를 들어, 다음 코드는 슬라이드 쇼를 보여줄 것이다 :

HEADER :

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      // Clickable Dropdown 
      $('.menu-main-menu-container > ul').toggleClass('no-js js'); 
      $('..menu-main-menu-container .js ul').hide(); 
      $('.menu-main-menu-container .js').click(function(e) { 
       $('.menu-main-menu-container .js ul').slideToggle(200); 
       $('.clicker').toggleClass('active'); 
       e.stopPropagation(); 
      }); 
      $(document).click(function() { 
       if ($('.menu-main-menu-container .js ul').is(':visible')) { 
        $('.menu-main-menu-container .js ul', this).slideUp(); 
        $('.menu-main-menu-container').removeClass('active'); 
       } 
      }); 
     }); 
    </script> 

바닥 글 : 최대한 빨리 "JQuery와 - 1.11.0.min.js을 분리

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script type="text/javascript" src="<?php bloginfo('template_url')?>/slick/slick.min.js"></script> 
<script type="text/javascript" src="<?php bloginfo('template_url')?>/js/slick.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.slideshow-images').slick({ 

     }); 
    }); 
</script> 

그리고 "바닥 글에서 드롭 다운 메뉴가 다시 작동하기 시작합니다. 어떻게 둘 다 동시에 작동시킬 수 있습니까?

Answer 1

jQuery를 한 번만로드하면됩니다.

두 번째로로드 할 때 원래 jQuery 객체를 덮어 쓰고 더 이상 유효하지 않기 때문에 작동을 멈추게하는 이유가 있습니다. 그러나 헤더에서 이미 실행 된 코드는 원래 개체와 연결되어 있으므로 클릭 이벤트가 트리거 될 때 작동하지 않습니다.

해결 방법 : jQuery를 한 번만로드하십시오.