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>

jQuery脚本冲突

1 个答案: