Я пытаюсь создать набор ящиков, которые при наведении курсора исчезают и появляются их дочерние ящики. Затем, когда пользователь нажимает на один из этих дочерних блоков, будет отображаться 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;
}