Question

这就是我对简单的可折叠div的看法（单击切换按钮时打开/关闭）

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });

});

<a href="#" class="show_hide">Show/hide</a>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>


.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

.show_hide {
    display:none;
}

现在，该功能完美无缺，但是如果我打开div然后导航页面，div显然会在重新加载/点击链接等时关闭。

是否有一种简单的方法可以添加一个记住的状态，以便在整个用户体验期间，当他点击打开它时div保持打开状态？

Answer 1

我认为你有两种选择。

首先是进行AJAX调用以使用PHP保存div的状态，例如会话变量。

或者甚至可以更好地利用HTML5的离线存储。

但我不知道浏览器对离线存储的支持是什么。

Answer 2

如何使用javascript在用户计算机上创建cookie？

您可以在此处阅读更多内容.... http://w3schools.com/JS/js_cookies.asp

Answer 3

你可以下载JQuery cookie插件，这会让它更容易一些：

http://plugins.jquery.com/project/Cookie

JQuery - 可折叠DIV：记住已打开div的状态的简单方法？

3 个答案: