Question

我有一个使用<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>

Answer 1

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

另外，为什么要将两个函数传递给.click()？ .click()只接受一个处理函数。如果传递两个参数，它会将第一个视为事件数据。

Answer 2

正如我前面提到的，SlideUp和SlideDown用滑动动作隐藏匹配的元素。它不会“滑动”周围的东西。

我修改了您的代码以使用animate函数创建效果。看看jsfiddle，看看这是不是你想要的？

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

幻灯片和滑动框

2 个答案: