jquery - 在使用 jquery 回发后保留一个类

Question

我有以下内容：

function pageLoaded() {

    $(".panel-dividers").click(function () {
            $(this).parent().toggleClass("collapsed");
            return false;
        });
});

使用 jquery 回发后，如何让类在 div 中折叠？

Answer 1

您将无法做到这一点，因为 jQuery 是客户端，它不记得在页面刷新之前在 DOM 中所做的任何更改。

当页面刷新时，它会重新加载整个 DOM。

您可以考虑使用JSON 进行回发

还有另一种使用DOM Storage的方法，正如@Jitendra 所建议的那样

Answer 2

将服务器端指示器带入 jquery 并对其进行测试。

function pageLoaded() {

    var my_server_side_indicator_of_collapsed_state = <INSERT SERVER SIDE STUFF> (eg. <?php echo my_var; ?>)

    if( my_server_side_indicator_of_collapsed_state === TRUE ){
        $(this).parent().toggleClass("collapsed");
    }

    $(".panel-dividers").click(function () {
            $(this).parent().toggleClass("collapsed");
            return false;
        });
});

或者，您可以使用 AJAX 方法并在成功回调中返回一个指示器。

Answer 3

使用 cookie 或将切换存储在服务器上，以便可以将其重新呈现为首选项。

最简单的（并且对每个用户设置的干扰也很小）是使用 cookie。使用$.cookie并将其添加到您的点击代码以存储首选项（然后在页面加载时调用这些首选项并相应地 show.hide）将是一个不错的选择 -但是这需要标题具有一些唯一的 ID，否则它就是全部 -或无设置。

为了进一步澄清，如果您在页面加载时显示了 3 个标题，并且您在其中一个上单击隐藏，则 cookie 可能被设置为隐藏。下一页加载所有元素都被隐藏了，因为没有说 [first|second|third] 元素是点击的那个。

更新

如果您在面板上没有 ID，并且无法制作或不想制作任何 ID，则可以使用以下代码使其工作。然而，一个警告是，只要面板的顺序不变，它就可以工作（因为 ID 是由 jQuery 在加载时生成的，而不是服务器给出的固定 ID）。

$('.panel-divider').each(function(id){
    var $this = $(this),
        $parent = $this.parent(),
        className = 'collapsed',
        cookieName = [className,id].join('-');
    
    if ($.cookie(cookieName) === className){
        $parent.addClass(className);
    }
    
    $this.on('click',function(){
        $parent.toggleClass(className);
        if ($parent.hasClass(className)){
            $.cookie(cookieName, className);
        }else{
            $.removeCookie(cookieName);
        }
    });
});

同样，这是一个工作示例（当 jsFiddle 加载时，单击灰色标题以切换面板。然后，Run再次点击按钮，页面将重新加载保存的设置。泡沫，冲洗，重复。