Question

我有以下内容：

function pageLoaded() {

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

如何在使用jquery回发之后将类折叠在div中？

Answer 1

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

刷新页面时，它会再次加载整个DOM。

您可以考虑使用JSON for postback

根据@Jitendra

的建议，还有另一种使用DOM Storage的方法

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，您可以使用following code使其正常工作。但需要注意的是，只要面板的顺序没有改变，它就会起作用（因为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);
        }
    });
});

再次，here is a working example（当jsFiddle加载时，单击灰色标题切换面板。然后再次点击 Run 按钮，页面将重新加载保存的设置.Lather，Rinse，重复。

用jquery回发后添加一个类

3 个答案:

更新