上滑和下滑框答案

【问题标题】：Slideup and slidedown box上滑和下滑框
【发布时间】：2012-11-13 11:15:29
【问题描述】：

我有一个使用 <div> 的绿色大框，还有两个更小的 div，分别称为红色和蓝色。

当有人点击绿色框时，我希望红色框向上滑动，同时蓝色框向下滑动。

然后当有人点击绿色框时，红色框应该向下滑动，绿色框应该向上滑动。

我已经编写了这个基本脚本，但是当我点击绿色框时，红色框和绿色框会同时向上滑动。

如何做到一升一降？

CSS：

.block {
   position: absolute;
   left: 23px;
   top: 34px;
   width: 500px;
   height: 360px;
   z-index: 1;
   background-color: #0F0;
}
.top-box {
   background-color: #F00;
   height: 179px;   width: 499px;
   z-index: 50;
}

.top-down {
   background-color: #00F;
   height: 179px;
   width: 499px;
   z-index: 50;
}

.bottom-box {
   background-color: #06F;
   height: 179px;
   width: 499px;
}

#red {
   position: absolute;
   left: 266px;
   top: 399px;
   width: 494px;
   height: 138px;
   z-index: 2;
}

#blue {
   position: absolute;
   left: 26px;
   top: 35px;
   width: 494px;
   height: 138px;
   z-index: 2;
}

JavaScript：

$(".block").click(
    function(){
       $(".top-box").slideUp('fast');
    },
    function(){
       $(".top-down").slideDown('slow');
    });
});

HTML：

<div class="block">    
   testing on green
   <div class="top-box" id="red">
      <div class="top-down" id="blue">
      </div>
   </div>

【问题讨论】：

SlideUp 和 SlideDown 通过滑动隐藏匹配的元素。这就是你所追求的吗？你能在jsfidde中发布你的代码吗？所以我们可以看看发生了什么......谢谢。
嗨，感谢您的回复，在这里您可以看到该示例，但仍然无法在 jsfidde 中工作，我是该站点的新手，但不确定如何在 jsfidde 中使用 jquery 进行设置。但是请看一下我的 jsfidde jsfiddle.net/Alidad/TMTMH/1 我喜欢看到的是，当您单击绿色框时，红色框向上滑动，蓝色框同时向下滑动，这是如何工作的！

标签： javascript jquery

【解决方案1】：

您不能隐藏（通过向上滑动）父元素，然后期望子元素可见。因为#blue 是#red 的孩子，所以这是行不通的。另外，由于#blue 已经可见，slideDown() 无论如何也不会做任何事情。

另外，你为什么要向.click() 传递两个函数？ .click() 只需要一个处理函数。如果您传递两个参数，它将把第一个视为事件数据。

【讨论】：

【解决方案2】：

正如我之前提到的，SlideUp 和 SlideDown 通过滑动来隐藏匹配的元素。它不会“滑动”东西。

我修改了您的代码以使用animate 函数创建效果。看看 jsfiddle，看看这是否是你所追求的？

http://jsfiddle.net/neo108/SRYXN/

【讨论】：