使用jQuery切換容器的寬度

Question

我正在爲MyBB論壇軟件開發一個主題。 我想添加一個特性，其中寬度從容器的固定1000px擴展到流體寬度的85％，反之亦然使用jQuery緩慢動畫。 我想有一個開關按鈕，它說擴大 - 縮小按鈕。 容器也應該支持cookie，所以當用戶重新加載頁面時，它的寬度將與他選擇的寬度相同。 我嘗試了很多來自Stackoverflow和Web的解決方案，但徒勞無功。 幫助表示讚賞。 由於提前， 認爲

下面是代碼：

你好，我想通了.... jQuery的切換，但我想Cookie添加到它。 這裏是代碼

$（文件）。就緒（函數（）{
$（ '＃切換按鈕'）。點擊（函數（）{
VAR toggleWidth =（「＃container」）。width（）== 960？「85％」：「960px」;
$（'＃container，.wrap'）。animate（{width：toggleWidth}）;
} ）;
}）;

謝謝:)

Answer 1

以下是按照您的要求，以便試試這個代碼代碼：
HTML

<div id="container">this is container div</div> 
<div class="wrp">this is wrp div</div> 
<input type="button" value="toggle" id="toggle-button"> 

CSS

#container { 
    width:960px; 
    background-color: red; 
} 
.wrp { 
    width:1000px; 
    background-color: green; 
} 

JS

$(document).ready(function() { 
    var setWidth = $.cookie("width"); 
    if (typeof setWidth !== "undefined" && setWidth == "85%") { 
     $('#container,.wrp').width(setWidth); // 85% width set using cookie 
    } else if (typeof setWidth !== "undefined" && setWidth == "960px") { 
     $('#container,.wrp').width(setWidth); // 960px,1000px(for wrp) width set using cookie 
    } 
    $('#toggle-button').click(function() { 
     var toggleWidth = $("#container").width() == 960 ? "85%" : "960px"; 

     $('#container, .wrp').animate({ 
      width: toggleWidth 
     }); 
     $.cookie('width', toggleWidth); 
    }); 
}); 

JSFIDDLE DEMO

注：你必須包括jquery.cookie.min.js到您的文件中的cookie獲得工作