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

演示将帮助你理解我的意思。所有我想要的是文本滑动与div命名为search。所以当search关闭时，我猜text也会关闭

Answer 1

添加overflow: hidden .search。

Answer 2

这就解决了这个问题:

[update to your fiddle] [http://jsfiddle.net/QzLst/1/]1

我们可以用下面的CSS隐藏.text类:

.text {
    display: none;
}

然后我们切换.text类:

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