请看下面我的 HTML 代码:
<div class="accordion">
<ul>
<li class="box1">
<div class="normal"> CONTENT HERE </div>
<div class="expanded"> CONTENT HERE </div>
<div class="hidden"> CONTENT HERE </div>
</li>
<li class="box2">
<div class="normal"> CONTENT HERE </div>
<div class="expanded"> CONTENT HERE </div>
<div class="hidden"> CONTENT HERE </div>
</li>
<li class="box3">
<div class="normal"> CONTENT HERE </div>
<div class="expanded"> CONTENT HERE </div>
<div class="hidden"> CONTENT HERE </div>
</li>
</ul>
</div>
基本上它是一个由 jQuery 插件驱动的手风琴。它有 3 个框,根据用户悬停在哪个框上,我希望显示或隐藏内部 div(正常、展开、隐藏)。以下是场景:
- 默认情况下,所有 div.normal 将默认显示,div.expanded 和 div.hidden 将被隐藏。
- 例如,当用户将鼠标悬停在 li.box1 上时,它的 div.expanded 将被显示,而 div.normal 和 div.hidden 将被隐藏。然而,对于 li.box2 和 li.box3,只有 div.hidden 将分别显示,其余的 div 将被隐藏。
我已经从代码开始,但我认为它不会去任何地方。(我是设计师,你看。)
这听起来很复杂,但我知道它可以通过 jQuery 轻松完成,对任何可以提供帮助的人来说,我都会非常感激。
更新:这是我到目前为止所做的。
$(document).ready(function () {
$(".accordion li").hover(function () {
$(this).siblings().children(".normal").hide();
$(this).siblings()..children(".hidden").delay(700).show();
$(this).children(".expanded").delay(700).show();
}, function () {
$(this).siblings().children(".normal").delay(700).fadeIn("fast");
$(this).siblings().children(".hidden").fadeOut("fast");
$(this).children(".expanded").fadeOut("fast");
});
});