为什么这个幻灯片/切换只能运行一次？

-1

我只是无法弄清楚，为什么这个slidetoggle不起作用。它只是运行一次：为什么这个幻灯片/切换只能运行一次？

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); 

     }); 
}) ;

这里的小提琴：

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

来源

2012-06-28 Melros

请不要依靠的jsfiddle或其他外部链接，使您的文章非常有用。如果你想在这里提问，告诉我们代码，告诉你期望它做什么，并告诉我们你没有想到的是什么。 – meagar

只需添加代码。我已经使用切换。我只用了一个代码，我发现它可以修复它，就像我希望它能够工作一样。但我无法弄清楚。这是我的问题。我希望有人能帮帮忙。 – Melros

东阳则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-28 20:59:06

非常感谢您的快速回答！它正在工作！完善！ – Melros

相反，使用以下的jQuery

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

看到这个现场example

来源

2012-06-28 20:57:17 jacktheripper

这当然起作用。但我不希望被切换的内容显示为：无。我想切换一个未知的高度，其中的内容已经在后台“加载”，这就是为什么我使用height：0。但是，感谢您的答案！ – Melros

如果您的代码在您的问题中起作用，那么将您的代码放入按钮的点击处理程序中 – Huangism

为什么这个幻灯片/切换只能运行一次？

回答

相关问题