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 回答