Question

我有以下代码slideToggle() div，同时显示一个按钮，允许您slideToggle()返回然后隐藏自己。

$(document).ready(function() {

$("#about-user-widget .hide-btn").click(function(){
    $("#about-user-widget").slideToggle();
    $("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: visible;');
});
//reverses the above action
$("#show-button").click(function(){
    $("#about-user-widget").slideToggle();
    $("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: none;');
});
})

以上工作效果很好，但是当我刷新页面时，它会回到默认状态。 about-user-widget已打开，show-button可见性设置为隐藏。

我的问题是，如何重新加载页面以记住我的设置是什么？例如，如果有人点击了隐藏，则about-user-widget被隐藏，show-button可见。如何在页面刷新时保留该设置？

默认情况下，show-button设置为隐藏。

<div class="pull-right" id="show-button" style="margin-bottom: 5px; font-size: 11px; color: #ddd; visibility: hidden;"><a href="#"><i class="fa fa-eye"></i> Show</a><span>&nbsp;&nbsp;|&nbsp;&nbsp;</span></div>

我知道我需要以某种方式将此内容提交给内存（cookie，某种类型的本地存储）但是对jquery不熟悉我不知道如何实现它。

任何帮助将不胜感激。

Answer 1

首先，我不明白你为什么需要两个按钮？您只需一个按钮即可实现此目的。按照保存显示/隐藏的div的状态

您可以在Cookie或首选的metnod中使用存储空间。

根据cookie;阅读以下stack post

然后这个例子你可以尝试：我使用了这个插件：https://github.com/js-cookie/js-cookie

$(document).ready(function() {
    var currentstate = Cookies.get('divstate');

    console.log('on refresh=' + currentstate);
    if (currentstate == 'open')
        $("#about-user-widget").show();
    else
        $("#about-user-widget").hide();


    $("#button").click(function() {
        $("#about-user-widget").slideToggle();
        var currentstate = Cookies.get('divstate');


        if (currentstate == 'close' || currentstate == undefined) {
            Cookies.set('divstate', 'open');
            console.log('when click');

        } else {
            Cookies.set('divstate', 'close');
            console.log('else');

        }

        console.log(Cookies.get('divstate'));
    });


});

HTML部分：

<input id="button" type="button" value="show/hide" />
<div id="about-user-widget" style="display: none; width: 100px; height: 100px; background: #b2000b">some text</div>

请注意 Cookie插件与浏览器的兼容性;我使用FireFox测试并正常工作。

使用slideToggle（）jQuery，并记住页面刷新时的设置

1 个答案: