javascript設置高度

Question

我想做很簡單的事情，設置div的高度取決於高度是多少。 所以當網站加載的高度是45px，點擊後按鈕高度是100px。下一次點擊後，我想我的身高回到45px。我使用jQuery，代碼如下： http://codepen.io/zlyfenek/pen/pAcaw 感謝您的任何幫助，因爲我是jQuery的新手。

Answer 1

您可以使用jQuery的.toggleClass()函數。

$(function(){ 
    $('.yourButton').click(function(){ 
     $('.yourDiv').toggleClass('big'); 
    }); 
}); 

演示：http://jsfiddle.net/FYyU6/

注：

你big CSS類應該出現在你小班Order Matters後。

Answer 2

您應該只是有一個類，設置高度爲100px，然後撥動它，當你點擊按鈕：

.opened { height: 100px; } 

$("button").on("click", function() { 
    $(".con_b").toggleClass("opened"); 
}) 

Answer 3

function showHeight(ele, h) { 
$("div").text("The height for the " + ele + 
" is " + h + "px."); 
} 

// use .on instead of .one, .one will online listen for a click one time, 
// so your second click will not be seen 
$("button").on('click', function() { 
    if ($(".con_b").height() == 45) 
    { 
    $(".con_b").height(100); 
    } 
    else 
    { 
    // show height and change height should be two different actions 
    $('.con_b').height(45); 
    showHeight(".con_b",$(".con_b").height()); 
    } 

}); 

Answer 4

變化$("button").one到$("button").on

Answer 5

function showHeight(ele, h) { 
$("div").text("The height for the " + ele + 
" is " + h + "px."); 
} 
$("button").on('click', function() { 

    if ($(".con_b").height() == 45) 
    { 
    $(".con_b").height(100); 
    } 
    else 
    { 
    $(".con_b").height(45); 
    } 

其$("button").on不是$("button").one