Javascript冲突(淡入VS.jQuery Accordion）

Javascript Conflict (Fade-In VS. jQuery Accordion)

本文关键字：jQuery Accordion VS 淡入 冲突 Javascript      更新时间：2023-09-26

我正在为其中一个页面上的标题图像使用一个基本的淡入javascript函数，当我尝试在该页面上使用jQuery垂直手风琴菜单时，它会阻止加载标题。我已经浏览了所有的javascript代码（用于手风琴的文件），并找出了冲突的函数。以下函数是我的基本淡入脚本：

<script type="text/javascript">
    $('html').addClass('js_on');
    $(window).load(function (){
        $('#slideshow').fadeIn(2000);
    });
</script>

以下是冲突的几行代码（"if"语句不冲突。它是之前的所有内容，但我包含了"if"声明，只是为了让您拥有完整的功能）：

function $(element) {
  if (arguments.length > 1) {
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
  elements.push($(arguments[i]));
   return elements;
  }
  if (typeof element == 'string')
    element = document.getElementById(element);
  return Element.extend(element);
}

我为这件事伤透了脑筋。有人知道吗？

jQuery提供了两种访问方法：jQuery()和$()简写。它们是等价的。

您的手风琴代码正在覆盖$()函数，只剩下jQuery()。

因此，您可以选择简单地使用较长的语法：

<script type="text/javascript">
jQuery('html').addClass('js_on');
jQuery(window).load(function (){
    jQuery('#slideshow').fadeIn(2000);
});
</script>

另一种选择是将jQuery传递到闭包中，然后在里面使用缩写$语法：

<script type="text/javascript">
// Self-executing function that calls itself immediately
(function($){    
  // Inside this function, '$' now refers to the argument that was passed in, which is jQuery
  $('html').addClass('js_on');
  $(window).load(function (){
      $('#slideshow').fadeIn(2000);
  });
}(jQuery));
</script>

另一个选项是使用jQueryUI库中的手风琴（http://jqueryui.com/demos/accordion/），这将使您从一开始就避免整个冲突问题。

相关文章：