jQuery - 切換，再次點擊返回本地

第一個藍色塊有min-height of 500px。它顯示關於我的信息。所以觀衆按下名爲「LueLisää」的按鈕（這意味着閱讀更多）。藍塊應該改變它的高度，看起來不會混亂。

這種情況應該發生：

新聞更多信息
顯示更多信息
增加藍色塊的高度，所以它看起來不錯。（自動或超過500像素）
再次單擊時返回原始大小（500像素）。

什麼情況正在發生：

新聞更多信息
顯示更多信息
增加藍色塊的高度

當我再次點擊不返回。

$(".more button:eq(0)").click(function(){ 
     $(".about").css("height", "630px"); 
     $(".visible:eq(0)").toggle('slow'); 
     $(".hidden:eq(0)").toggle('slow'); 
    });

您可以使用.css ("height", "toggle")，但只是0px和原始（500px）之間切換。

此處有任何解決方法嗎？我應該使用.animate？

來源

2014-03-27 Jaakko Uusitalo

我認爲你可以在你的CSS動了一下實現這一點，我已經在螢火，我快玩認爲這可以做到沒有任何迫使高度，這應該讓你的頭更清晰一點！

一些變化我做：

#left { 
    display: inline-block; 
    width: 60%; 
} 
#right { 
    display: inline-block; 
    width: 39%; /* don't know why it doesn't like 100% total */ 
    text-align:center; 
    vertical-align: top; /* make the image stay at the top */ 
} 
.grid { /* Remove the height, and add extra padding (margin removed on left and right) */ 
    margin: 0 auto; 
    padding: 150px 50px 50px; 
    width: 860px; 
}

這些變化允許內容不僅僅是流量自然 - 這是這意味着需要強制高度的浮動。

來源

2014-03-27 11:07:27

我開始認爲它可能只是我的CSS正在竊聽。我試圖使用最小高度，因爲這種錯誤，但不知何故它沒有在這一個工作。謝謝！ –

您可以嘗試toggleClass功能。

$(".className").toggleClass("toggle-class");

來源

2014-03-27 10:50:07

是的，總是有這樣的選擇，但不是真的有更簡單的方法來做到這一點嗎？我真的想在稍後添加動畫。 –

您可以使用.toggle()和animate這裏，像這樣：

$('.about').toggle(
    function(){ 
     $(this).animate({ 
      height: "630" 
     }, 500); 
    }, 
    function(){ 
     $(this).animate({ 
      height: "500" 
     }, 500);  

    } 
);

來源

2014-03-27 10:56:42

顯然切換功能不起作用。 –

jQuery - 切換，再次點擊返回本地

回答

相關問題