使用jQuery的容器的切换宽度

Question

我正在为MyBB论坛软件的主题工作。我想添加一个特性，宽度从容器的固定的1000 is扩展到流体宽度的85%，反之亦然，使用jQuery进行慢动画。我想要一个按钮，上面写着展开收缩按钮。容器还应该支持cookie，所以当用户重新加载页面时，它的宽度与他选择的宽度相同。我尝试了许多解决方案，从堆栈溢出和通过网络，但没有成功。我们很感激你的帮助。先谢谢你，问候

以下是代码：

你好我想出来了..。jquery切换，但我想在其中添加cookie。这是代码

$(document).ready(函数(){) $(#切换-按钮).click(函数(){ var toggleWidth =$(“#容器”).width() == 960？"85%“："960px"； $(‘#容器，.wrap').animate({宽度: 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演示

注意:为了获得工作，您必须将jquery.cookie.min.js包含在您的文件中，以便cookie工作。