Question

我在我的一个页面上使用基本的淡入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);
}

我在这个问题上惹恼了我。有人有任何想法吗？

Answer 1

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>

另一种选择是使用jQuery UI库中的手风琴（http://jqueryui.com/demos/accordion/），这样可以让你首先避免整个冲突问题。

Javascript Conflict（Fade-In VS. jQuery Accordion）

1 个答案: