jquery - jQuery slideToggle() イベントの後に要素の :visibil 状態を localStorage に送信する方法

Question

div の内容を展開/折りたたむために、全体的なラッパー div で slideToggle を呼び出す div 構造があります。

ユーザーがdivを離れる状態に応じて、divの状態(開いているか閉じているか)を保存したいと思います。

以下のコードでは、div グループの展開/折りたたみに関係なく、コンソールの alert(localStorage.getItem('widgetPreview')) は常に表示を返します。

$('#myDiv').on('click',function(){
    $(this).children().slideToggle();
    if((this).children().is(':visible')){
        localStorage.setItem('widgetPreview','visible');
    }
    else
    {
        localStorage.setItem('widgetPreview','hidden');
    }
}

Answer 1

$('#myDiv').on('click',function(){
    $(this).children().slideToggle().promise().done(function() {
        var vis = $(this).is(':visible') ? 'visible' : 'hidden';
        localStorage.setItem('widgetPreview', vis);
    });
});