Question

请看下面的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");

  });
});

Answer 1

$(document).ready(function(){

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

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

这是你可以在jQuery中隐藏和显示DOM元素的方法。请按照您希望的方式进行设置。

Answer 2

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

  $("li.box1").hover(function(){
     $(this).find('.expanded').show();
     $(this).find('.hidden').show();
    $(this).find('.normal').hide();
 });

使用jQuery在手风琴中悬停时隐藏/显示内部div

2 个答案: