Question

我注意到当我更改内容类的填充设置时（我认为空白区域太多），它会完全弄乱平滑的下拉菜单。我不确定为什么会这样，我在JavaScript中看不到任何内容。

HTML：

<div class="container">
    <div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">TIME</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">CREATIVITY</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">BUDGET</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
</div>

CSS：

.title {
    padding-left:15px;
    height:17px;
    background: transparent url('http://www.elevate1.co.uk/dropdownwitharrows/images/arrow-toggle.png') 0px 5px  
        no-repeat;
    cursor:pointer;
    margin-bottom:10px;

}
.title img{
    width: 24px;
    margin-right: 5px;
    float: left;
}

.title span{
    font-size: 16px;
    line-height: 24px;
    float: left;
}
.on {
    background: transparent url('http://www.elevate1.co.uk/dropdownwitharrows/images/arrow-toggle.png') 0 -10px  no-repeat;
}
.content {
    display:none;
    padding: 10px;
    margin-bottom:10px;
}

JavaScript的：

$(document).ready(function() {
    $('.title').click(function() {
        $('.title').removeClass('on');
        $('.content').slideUp('normal');
        if($(this).next().is(':hidden') == true) {
            $(this).addClass('on');
            $(this).next().slideDown('normal');
        } 
    });
});

Answer 1

正在发生的事情是容器的高度是动画的，容器的子容受边缘，线高等的影响，这些都取决于容器的边界。添加以下内容进行修复：

.content {
    overflow: hidden;
}

是的，就这么简单：P

这是您的Fiddle已更新。

jQuery slideDown动画抖动

1 个答案: