Joomla 1.5中的奇怪jQuery异常

Question

我正在尝试创建一组框，这些框在悬停时将消失，并且其子框将出现。 然后，当用户单击这些子框之一时，将显示ul或某种形式的内容，仅此而已。 我的代码在jsFiddle中很好用（您可以在http://jsfiddle.net/kKvYS/上看到它），但是当我将其插入joomla文章或模块中时，它没有效果，并且在chrome调试器控制台中出现了异常“未捕获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.noConflict(); 在您的jquery文件中。

Answer 2

尝试将所有“ $”替换为“ jQuery”或仅替换

$(document).ready(function(){

通过

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