Joomla 1.5中奇怪的jQuery異常

Question

我試圖創建一組盒子，這些盒子在懸停時會消失，並且它們的子框會出現。然後，當用戶點擊其中一個子框時，會顯示一個ul或某種內容，就是這樣。我的代碼在jsFiddle中很好用（你可以在這裏看到它http://jsfiddle.net/kKvYS/），但是當我將它插入到joomla文章或模塊中時，它不會，並且在chrome調試器控制檯中出現異常「Uncaught TypeError：無法讀取屬性'defaultView'未定義」。這是我的代碼：

HTML：

<div class="container lvl1 parent1"> 
     <div id="block-1" class="lvl1-block block"></div> 

     <div id="block-1-1" class="lvl2-block group1 block"> 
      <ul class="details"> 
      <li>lorem ipsum</li> 
      <li>lorem ipsum</li> 
      <li>lorem ipsum</li> 
      <li>lorem ipsum</li> 
     </ul> 
     </div> 
     <div id="block-1-1" class="lvl2-block group1 block"> 
      <ul class="details"> 
      <li>lorem ipsum</li> 
      <li>lorem ipsum</li> 
      <li>lorem ipsum</li> 
      <li>lorem ipsum</li> 
     </ul> 
     </div> 
     <div id="block-1-1" class="lvl2-block group1 block"> 
      <ul class="details"> 
      <li>lorem ipsum</li> 
      <li>lorem ipsum</li> 
      <li>lorem ipsum</li> 
      <li>lorem ipsum</li> 
     </ul> 
     </div> 


    </div> 

    <div class="container lvl1 parent2"> 
     <div id="block-2" class="lvl1-block block"></div> 

     <div id="block-2-1" class="lvl2-block group2 block"> 

     </div> 
     <div id="block-2-1" class="lvl2-block group2 block"> 

     </div> 
     <div id="block-2-1" class="lvl2-block group2 block"> 

     </div> 



    </div> 

    <div class="container lvl1 parent3"> 
     <div id="block-3" class="lvl1-block block"></div> 

     <div id="block-3-1" class="lvl2-block group3 block"> 

     </div> 
     <div id="block-3-1" class="lvl2-block group3 block"> 

     </div> 
     <div id="block-3-1" class="lvl2-block group3 block"> 
    </div> 

的Javascript：

var duration = 500; 
var easing = "swing"; 
$(document).ready(function(){ 
$(".container").hover(function(){ 
    $(this).find(".lvl2-block").fadeToggle(duration, easing); 
    $(this).find(".lvl1-block").fadeToggle(duration, easing); 
}, function(){ 
    $(this).find("ul.details").fadeOut(duration); 
    $(this).find(".lvl2-block").fadeOut(duration); 
    $(this).find(".lvl1-block").fadeIn(duration); 
});  


$(".lvl2-block").hover(function(){ 
    $(this).find("ul.details").fadeToggle(duration); 
    $(this).find(".lvl2-block").fadeToggle(duration); 
});  

}); 

CSS：

.lvl1-block{ 
display:block; 
width: 100%; 
height: 100%; 
background: blue; 
float:left; 
position: relative; 
z-index: 5; 
} 

.lvl2-block{ 
display:none; 
width: 200px; 
height: 60px; 
background: red; 
margin: 5px 0px 5px 0px; 
position: relative; 
z-index: 3; 
} 


.container{ 
float: left; 
margin: 0px 5px 0px 5px; 
width: 200px; 
height: 200px; 
position: relative; 
position: relative; 
z-index: 5; 
} 

.details{ 
display:none; 
position: relative; 
z-index: 1; 
} 

Answer 1

在jQuery的文件添加jQuery.noConflict();。

Answer 2

試圖通過一個 「jQuery的」 全部替換 「$」 或只是替換

$(document).ready(function(){ 

通過

jQuery(document).ready(function($){