Slideup and slidedown box

我有一个很大的绿色框，使用<div>，我还有两个更小的div，分别叫做红色和蓝色。Slideup and slidedown box

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

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

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

怎样才能使一个人在同一时间上升而另一个人下降呢？

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>

来源

2012-11-13 user1819558

SlideUp和SlideDown用滑动隐藏匹配的元素。那是你的追求？你可以请你的代码在jsfidde？所以我们可以看到发生了什么......谢谢。 – neo108

您好，感谢您的回复，在这里您可以看到该示例，但仍然无法在jsfidde中工作，我是该网站的新成员，但不知道如何使用jsfidde中的jquery进行设置。不过请看看我的jsfiddle.net/Alidad/TMTMH/1/我喜欢看什么，当你点击绿色框时，红色框上滑，同时蓝色框同时滑下，这是如何工作的！ – user1819558

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

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

来源

2012-11-13 03:13:00

正如我前面提到的，SlideUp和SlideDown以滑动方式隐藏了匹配的元素。它不会“滑动”四周。

我修改了您的代码以使用animate函数创建效果。看看这个jsfiddle，看看这是你在做什么之后？

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

来源

2012-11-13 03:15:29 neo108

Slideup and slidedown box

回答

相关问题