1

请看下面我的 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(正常、展开、隐藏)。以下是场景:

  1. 默认情况下,所有 div.normal 将默认显示,div.expanded 和 div.hidden 将被隐藏。
  2. 例如,当用户将鼠标悬停在 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");

  });
});
4

2 回答 2

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

        $('.expanded').hide();

        $('.box1').hover(function(){
                    $('.expanded').show();
        });
});

这是在 jQuery 中隐藏和显示 DOM 元素的方法。请按照您想要的方式获取该设置。

于 2012-05-09T03:40:45.587 回答
0

您最初可以使用 style='display:none' 来隐藏 div 用于悬停事件;

  $("li.box1").hover(function(){
     $(this).find('.expanded').show();
     $(this).find('.hidden').show();
    $(this).find('.normal').hide();
 });
于 2012-05-09T03:42:58.427 回答