爲什麼這個幻燈片/切換隻能運行一次？

-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

爲什麼這個幻燈片/切換隻能運行一次？

回答

相關問題