-1

このスライドトグルが機能しない理由がわかりません。一度だけ実行されます：

HTML：

<div class="text">bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
    <br />
    bla bla bla bla
</div>
<div class="button">Show</div>​

CSS：

.text{
  height:0;
  overflow:hidden;
}
.heightAuto{
    height:auto;
}​

働き：

$(function(){
    $(".button").toggle(function()

        {
            var $text = $(".text");
            var contentHeight = $text.addClass('heightAuto').height();

            $text.removeClass('heightAuto').animate({ height: contentHeight}, 500);

        }, function() {

            $(".text").animate({ height: "0"}, 500);

        });
}) ;

</ p>

これがフィドルです：

http://jsfiddle.net/QwmJP/10/

4

2 に答える 2

3

最初のアニメーションの後、contentHeight変数が再び0になるためです。

上書きしない場合は機能します。

$(function() {
    var $text = $(".text");
    var contentHeight = $text.addClass('heightAuto').height();
    $text.removeClass('heightAuto');

    $(".button").toggle(function() {    
        $text.removeClass('heightAuto').animate({
            height: contentHeight
        }, 500);

    }, function() {

        $(".text").animate({
            height: "0"
        }, 500);
    });
});​

http://jsfiddle.net/QwmJP/13/

于 2012-06-28T20:59:06.807 に答える
1

代わりに、次のjQueryを使用してください

$('.button').on('click', function() {
    $('.text').slideToggle();
});​

このライブ例を見る

于 2012-06-28T20:57:17.453 に答える