在jquery中使用百分比設置div的寬度

Question

我試圖改變一個div的寬度，百分比，當點擊一個按鈕（在本例中是另一個div）時。我在example中使用它，但無法在我的站點的實際代碼中成功重新創建它，例如here。它們與我的眼睛完全一樣，但顯然有些事情是錯誤的。

JavaScript的正在使用的是：

$('#button').click(function() { 
if(!collapsed){ 
    $('.left').animate({width: '10%'}); 
} else { 
    $('.left').animate({width: '50%'}); 
} 
collapsed = !collapsed; }); 

然而，至少在第二個例子，它沒有什麼結果。

Answer 1

兩個與你的版本問題：

1. 的的jsfiddle不包括jQuery的。
2. 您沒有定義collapsed變量，所以您在控制檯中出現錯誤。

解決這些問題，它的工作原理。另外請注意，您可以使寬度使用三元表達式改變一個班輪：

var collapsed = false; 
$('#button').click(function() { 
    $('.left').animate({ width: collapsed ? '50%' : '10%' }); 
    collapsed = !collapsed; 
}); 

Working example

它也可能是值得呼籲animate()防止連續點擊填補了動畫隊列之前加入stop(true)。