使用jQuery切换容器的宽度

我正在为MyBB论坛软件开发一个主题。 我想添加一个特性，其中宽度从容器的固定1000px扩展到流体宽度的85%，反之，使用jQuery进行慢速动画。 我想有一个切换按钮，上面写着展开-收缩按钮。 容器还应该支持cookies，这样当用户重新加载页面时，页面的宽度将与他选择的相同。 我从Stackoverflow和over web尝试了许多解决方案，但都没有成功。 谢谢你的帮助。 提前感谢,， 问候

代码如下：

---

你好，我知道了。。。。jquery切换，但我想向其中添加cookie。 这是密码

$（文档）.ready（函数（）{
$（“#切换按钮”）。单击（函数（）{
var-toggleWidth=$（“#容器”）.width（）==960？“85%”：“960px”
$（'#容器，.wrap'）。设置动画（{width:toggleWidth}）；
})；
});

---

谢谢：）

以下是符合您要求的代码，请尝试此代码：
HTML

JS

---

注意：您必须将jquery.cookie.min.js包含到您的文件中，以便cookie获得工作

请添加示例代码，以便我可以帮助您。您好，我找到了。。。。jquery切换，但我想向其中添加cookie。下面是代码>>编辑的第一篇文章

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

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

$(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);
    });
});