javascript - jQuery Toggle (Expanding Div) 与文本的不一致过渡

Question

我的扩展 div 工作正常，但似乎过渡在带有文本的 div 上突然打开，但关闭时过渡平稳。我的代码在下面，它是一个 jsFiddle 演示的链接。

我怎样才能使开盘时的过渡像收盘时那样顺利？

演示:http://jsfiddle.net/phamousphil/s34fA/1/

HTML:

        <div class="grid_6 containerExpand collapsedExp">
        <div class="headerExpand"><a href="http://www.google.com">the google</a><br /></div>
        <div class="contentExpand">
        <p>google stuff google stuff google stuff!  google stuff google stuff google stuff!  google stuff google stuff google stuff!  google stuff google stuff google stuff!</p><br />
        <p>google stuff google stuff google stuff!  google stuff google stuff google stuff!  google stuff google stuff google stuff!  google stuff google stuff google stuff!</p>
    </div>
</div>
<div class="grid_6 containerExpand collapsedExp">
    <div class="headerExpand"><a href="http://www.yahoo.com">YAHOO</a><br /></div>
    <div class="contentExpand">
        <p>Yahoo!.</p>
    </div>
</div>

CSS:

.containerExpand {
}

.headerExpand {
cursor: pointer;
}

.headerExpand:hover {
background-color: #d3d3d3;
}

.collapsedExp .headerExpand {
}

.collapsedExp .headerExpand:hover {
background-color: #d3d3d3;
}
.contentExpand {
height: auto;
min-height: 100px;
overflow: hidden;
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
}

.collapsedExp .contentExpand {
min-height: 0px;
height: 0px;
}

JavaScript:

$(function(){
    $('.headerExpand').click(function(){
        $(this).closest('.containerExpand').toggleClass('collapsedExp');
        $(".headerExpand").find("a").click(function(e){e.stopPropagation()});
    });

});

Answer 1

这里是您的代码的一种简化方法，似乎测试良好。

演示 jsFiddle

HTML:

<div class="heading">the google</div>
<div class="content">
    <p>google stuff google stuff google stuff!  google stuff google stuff google stuff!  google stuff google stuff google stuff!  google stuff google stuff google stuff!</p><br />
    <p>google stuff google stuff google stuff!  google stuff google stuff google stuff!  google stuff google stuff google stuff!  google stuff google stuff google stuff!</p>
</div>

<div class="heading">YAHOO</div>
<div class="content">
    <p>Yahoo!.</p>
</div>

CSS:

.heading {
    cursor: pointer;
}
.heading:hover {
    background-color: #d3d3d3;
}
.content {
    padding: 5px 10px;
}

jQuery:

jQuery(".content").hide();
    //toggle the componenet with class msg_body
jQuery(".heading").click(function() {
    jQuery(this).next(".content").slideToggle(300);
});

希望这对你有用!