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($){

Joomla 1.5中奇怪的jQuery异常

2 个答案: