1

我正在为 MyBB 论坛软件开发一个主题。我想添加一个功能，其中宽度从容器的固定 1000 像素扩展到 85% 的流体宽度，反之亦然，使用 jQuery 的慢动画。我想要一个切换按钮，上面写着展开 - 收缩按钮。该容器还应该支持 cookie，因此当用户重新加载页面时，它的宽度将与他选择的相同。我尝试了 Stackoverflow 和网络上的许多解决方案，但徒劳无功。帮助表示赞赏。提前致谢，问候

这是代码：

您好，我想通了.... jquery 切换，但我想向它添加 cookie。这是代码

$(document).ready(function(){
$('#toggle-button').click( function() {
var toggleWidth = $("#container").width() == 960 ? "85%" : "960px";
$('#container, .wrap').animate({ width: toggleWidth });
});
});

谢谢 ：）

4

1 回答 1

0

以下是根据您的要求的代码，因此请尝试以下代码：
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 才能正常工作

于 2013-07-27T11:41:08.483 回答