用div滑动文本

Question

所以我有一个下拉菜单。 您单击“点击我”文本，它将显示。 这是一个演示http://jsfiddle.net/QzLst/

现在是问题所在。 即使我将其放在上下滑动的div ，仍会显示右侧的蓝色文本。 我不太确定该从哪里去。 这是我的标记

<div class="search">
  <div class="text">
   Some text
 </div>
 </div>
 <div class="click">Click me</div>

和CSS

.search{
    width: 100%;
    background: #000;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    z-index: 200;
    height:0;
  transition: 0.5s;
}
.toggle{
    height:100px;
}
.text{
    color: #009dff;
  float: right;
}

该演示将帮助您理解我的意思。 我只需要将文本与名为search的div一起滑动即可。 因此，当search关闭时，基本上我猜text也会关闭

Answer 1

添加overflow: hidden到.search 。

Answer 2

这解决了这个问题：

[更新到您的小提琴] [ http://jsfiddle.net/QzLst/1/] 1

我们可以使用以下CSS简单地隐藏.text类：

.text {
    display: none;
}

然后，我们切换.text类：

$(".click").click(function(){
     $(".search").toggleClass("toggle");
     $(".text").toggle()
});