jQuery slideUp和slideDown不能按预期工作

时间:2011-02-20 18:28:56

标签: jquery html css

我想隐藏并在使用jQuery的slideUp()和slideDown()选中或取消选中复选框时显示div元素。 我的div看起来如下:

<div class="parent">
    <label class="childLeft">text</label>
    <div class="childRight">
      <input type="text" />
      <select>
        ...
      </select>
    </div>
</div>

并且css代码是:

.parent {
  float: left;
  padding: 3px 0;
  width: 100%;
  min-height: 22px;
  border-bottom-color: #F2F2F2;
  border-bottom-style: dotted;
  border-bottom-width: 1px;
}
.childLeft {
  float: left;
  width: 108px;
  margin-right: 2px;
}
.childRight {
  float: right;
  width: 209px;
}

在slideUp(1000)上,看起来只有衬垫滑动,其余部分突然消失。在slideDown(1000)上显示div,然后填充幻灯片。

你知道为什么会这样吗?

1 个答案:

答案 0 :(得分:2)

原因是因为您在父元素上设置了min-height。这使得无法使该元素小于22像素,从而产生您所看到的效果。