Question

我对jQuery完全不熟悉，所以我完全不知道自己在做什么。

我想要创建的是一个向下滑动菜单，它填充页面的整个宽度并且是一定的高度。我希望内容从白线下方向下滑动到绿色div的顶部。

以下是我所得到的工作预览：http://jsfiddle.net/VRe9G/1/

$(".link_1, .content_1").hover(function() {
    $(".content_1").stop(true, true).slideDown(400);
}, function() {
    $(".content_1").stop(true, true).delay(10).slideUp(400);
});

$(".link_2, .content_2").hover(function() {
        $(".content_2").stop(true, true).slideDown(400);
    }, function() {
        $(".content_2").stop(true, true).delay(10).slideUp(400);
    });

$(".link_3, .content_3").hover(function() {
        $(".content_3").stop(true, true).slideDown(400);
    }, function() {
        $(".content_3").stop(true, true).delay(10).slideUp(400);
    });

就像我说的那样，对jQuery来说是全新的，所以我确信使用脚本比使用三个单独的时间更有效。

它在某种程度上起作用，但我无法按照我的意愿进行过渡。当你将鼠标悬停在不同的链接http://jsfiddle.net/Fu3xG/1/而不是现在正在进行的滑动/弹跳时，这是我想要实现的效果。

Answer 1

通过不改变大部分代码，可以通过向所有内容div添加类似'hideme'的类来修复转换

    <div class="content_1 hideme">Contents</div>
    <div class="content_2 hideme">Contents</div>
    <div class="content_3 hideme">Contents</div>

并调用悬停效果，如：

  $(".link_1, .content_1").hover(function() {
     $(".hideme").hide();          //add on all hover effect
     $(".content_1").stop(true, true).slideDown(400);
        }, function() {
           $(".content_1").stop(true, true).delay(10).slideUp(400);
});

Answer 2

用于动态悬停效果更新jquery：

   $(".hoverme").hover(function(){
       var showdiv = $(this).attr('id'); 
      /* it will select the link which is hovered and then will show the
        corresponding div which we had sync with alt attr */

       $(".hideme").hide();
       $("[class='hideme'][alt='"+showdiv+"']").slideToggle(400);
   });

您的HTML将在哪里：

 <ul>
    <li><div id="link_1" class="hoverme">Link #1</div> </li>
    <li><div id="link_2" class="hoverme">Link #2</div> </li>
    <li><div id="link_3" class="hoverme">Link #3</div> </li>
</ul>

<div alt="link_1" class="hideme">Contents1</div>
<div alt="link_2" class="hideme">Contents2</div>
<div alt="link_3" class="hideme">Contents3</div>

和CSS将是：

  .hoverme
   {
    margin-top: 30px;
    width: 130px;
    height: 53px;
    border: 1px solid #000;
   }

  .hideme
   {
    width: 100%;
    height: 470px;
    background-color: #fff;
    display:none;
    position: relative;
    color: #000;
   }

多个滑下div

2 个答案: