JQuery UI滑块手柄由于与大菜单冲突而消失

我在页面上制作了一个简单的JQuery滑块，它也有一个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。如果我不重新包含它，则看不到滑块的手柄。

如果我确实包含它两次，我可以看到滑块，但大菜单消失了。接下来我应该怎么做？

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

此外，您还需要将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>

相关内容

最新更新

热门标签：