JQuery UI 슬라이더 핸들이 megamenu와 충돌하여 사라졌습니다.

jquery 메뉴가있는 페이지에서 간단한 JQuery Slider를 만들었습니다. 내 페이지 모양은 다음과 같습니다.JQuery UI 슬라이더 핸들이 megamenu와 충돌하여 사라졌습니다.

<html> 
    <head> 
     <script type="text/javascript" src="javascripts/jquery-1.8.2.min.js"></script> 
     <script src="javascripts/jquery.megamenu.js" type="text/javascript"></script> 
    </head> 
    <body> 

     <ul class="megamenu"> 
      <li><a href="https://stackoverflow.com/a/1">firstly</a></li> 
      <li><a href="/b/2">secondly</a></li> 
     </ul> 

     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
     <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
     <script> 
      $(function() { 
      $("#slider-range-min").slider({ 
       range: "min", 
       value: 24, 
       min: 24, 
       max: 150, 
       slide: function(event, ui) { 
       $("#amount").val("$" + ui.value); 
       } 
      }); 
      $("#amount").val("$" + $("#slider-range-min").slider("value")); 
      }); 
     </script> 
     <div id="slider-range-min"></div> 
    </body> 
</html>

위 두 번 jquery가 포함되었습니다. 다시 포함시키지 않으면 슬라이더의 핸들을 볼 수 없습니다.

두 번 포함 시키면 슬라이더가 보이지만 메가 메뉴가 사라집니다. 다음에 무엇을해야합니까?

출처

2014-11-13 pg.

사용 var $ j = jQuery.noConflict(); JQuery와 코드 앞에

또한 스크립트 위의 사업부를 둘 필요가 ...

<div id="slider-range-min"></div> 

    <script> 
    var $j = jQuery.noConflict(); 
       $j(function() { 
       $j("#slider-range-min").slider({ 
        range: "min", 
        value: 24, 
        min: 24, 
        max: 150, 
        slide: function(event, ui) { 
        $j("#amount").val("$" + ui.value); 
        } 
       }); 
       $j("#amount").val("$" + $j("#slider-range-min").slider("value")); 
       }); 
      </script>

출처

2014-11-13 23:37:16 SergeDirect

도 넣어 상단 – SergeDirect

에서 모든 JQuery와 링크를 넣어 jqeury HTML의 가장 상단에 충돌없이 스크립트 - 다른 스크립트가 나오기 전에 – SergeDirect

충돌을 추가하지 않아도 메가 메뉴가 다시 나타나지 않으면 슬라이더가 사라지게됩니다. –

JQuery UI 슬라이더 핸들이 megamenu와 충돌하여 사라졌습니다.

답변

관련 문제