Jquery 多滑下div

我对jQuery完全陌生，所以我完全不知道自己在做什么

我试图创建的是一个向下滑动的菜单，它填充了页面的整个宽度，并且具有一定的高度。我希望内容从白线下面滑到绿色分区的顶部

以下是我的工作预览：

正如我所说，jQuery是全新的，因此我确信有一种比三次单独使用脚本更有效的方法

---

它在某种程度上是有效的，但我无法得到我想要的工作过渡。这是我想要实现的效果，因为你在不同的链接上悬停，而不是现在的滑动/反弹

通过不改变代码的大部分内容，可以通过向所有contents div添加一个类（如“hideme”）来修复代码转换

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

---

对于动态悬停效果，请使用以下内容更新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>

---

非常感谢。这很有效。能告诉我如何在多个div中使用它吗？而不是像以前那样重复三次。

   $(".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);
   });

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

  .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;
   }