1

私は次のものを持っています：

function pageLoaded() {

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

jqueryでポストバックした後、divでクラスを折りたたむにはどうすればよいですか?

4

3 に答える 3

0

jQuery はクライアント側であり、ページを更新する前に DOM で行われた変更を記憶していないため、これを行うことはできません。

ページが更新されると、DOM 全体が再び読み込まれます。

ポストバックに JSON を使用することを検討できます

@Jitendraが提案するように、 DOMストレージを使用する別の方法があります

于 2012-08-23T13:09:50.903 に答える
0

サーバー側インジケーターを 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 アプローチを使用して、成功のコールバックでインジケーターを返すこともできます。

于 2012-08-23T13:12:40.810 に答える
0

Cookie を使用するか、トグルをサーバーに保存して、設定として再レンダリングできるようにします。

最も簡単な (そしてユーザーごとの設定に関してほとんど干渉しない) 方法は、Cookie を使用することです。それを使用$.cookieしてクリックコードに追加して設定を保存する（その後、ページの読み込み時にそれらの設定を呼び出し、それに応じて show.hide する）のが良いでしょう-しかし、それには見出しに一意のIDが必要です。 or-nothing の種類の設定。

さらに明確にするために、ページの読み込み時にすべて表示される 3 つの見出しがあり、そのうちの 1 つを非表示にするをクリックすると、Cookie はおそらく非表示に設定されます。[first | second | third] 要素がクリックされたということは何もなかったため、次のページの読み込みではすべての要素が非表示になります。

アップデート

パネルに ID がなく、ID を作成できないか作成したくない場合は、次のコードを使用して機能させることができます。ただし、1 つの注意点は、パネルの順序が変更されない限り機能することです (ID は、サーバーによって指定された固定 ID ではなく、ロード時に jQuery によって生成されるため)。

$('.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ボタンをもう一度押すと、保存された設定がページにリロードされます。泡立て、すすぎ、繰り返し。

于 2012-08-23T13:21:23.060 に答える