Question

我在页面上创建了一个简单的JQuery Slider，它还有一个jquery菜单。我的页面看起来像这样：

<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="/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。如果我不重新加入它，我看不到滑块的手柄。

如果我确实包括它两次，我可以看到滑块，但megamenu消失了。接下来我该怎么办？

Answer 1

使用var $ j = jQuery.noConflict（）;在jquery代码之前

您还需要将div放在脚本之上......

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

由于与megamenu冲突，JQuery UI滑块手柄消失

1 个答案: