jQuery 脚本冲突

Question

我正在使用 jQuery 创建一个水平滚动网站，我还想添加此隐藏和显示功能。但是，当我为隐藏功能插入另一个 jQuery 脚本后，水平滚动的缓动效果不起作用!这样，当我单击网站的导航时，它会跳转到另一个部分。

这是我的 jQuery 代码:

<link rel="stylesheet" href="styles/style.css" type="text/css" media="screen" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script src="js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.localScroll.defaults.axis = 'x';
        $.localScroll();
    });
</script>
<!-----------------------hiding div------------------------------------>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $(".slidingDiv").hide();
        $(".show_hide").show();

        $('.show_hide').click(function () {
            $(".slidingDiv").slideToggle();
        });

    });
</script>   

有人知道如何解决这个问题吗？

Answer 1

考虑到您正在根据您的要求使用正确的脚本。

许多 JavaScript 库使用“$”作为函数或变量名，就像 jQuery 一样。在 jQuery 中，“$”只是“jQuery”的别名。要解决此问题，请在无冲突模式下添加 jquery。

jQuery.noConflict();

包含所有 jquery 代码，如下所示:

(function($) {    

     //jquery code goes here.    

})(jQuery);

查看完整代码:

<script type="text/javascript">
    //no conflict jquery
    jQuery.noConflict();

    (function ($) {

        //jquery code goes here.         
        $.localScroll.defaults.axis = 'x';
        $.localScroll();

    })(jQuery);
</script>
<script type="text/javascript">
    (function ($) {

        $(".slidingDiv").hide();
        $(".show_hide").show();

        $('.show_hide').click(function () {

            $(".slidingDiv").slideToggle();
        });

    })(jQuery);
</script>