LocalStorageは 'open'クラスを追加できず、そのまま保持します

Question

私はLocalStorageを使用してトグルバナーを開いたり閉じたりしています。 残念ながら、バナーの#buttonの切り替えボタンで開いているクラスを適切に維持して、それに応じてスタイルを変更することができませんでした。

私のコード：

$('#button').click(function() { 
    $(this).siblings().slideToggle(function() { 
    localStorage.setItem('display', $('#banner').is(':hidden')); 
    }); 
}); 
var block = localStorage.getItem('display'); 
if (block == 'true') { 
    $('#banner').hide() 
} 

私のhtml

<div id="banner_container"> 
    <div id="banner"> 
     <img src="#"> 
    </div> 
    <button id="button" href="javascript:void(0);"></button> <!-- toggle 'open' class if banner is visible/hidden and keep it in LocalStorage --> 
</div> 

私はslideToggle機能にtoggleClass（$(this).toggleClass('open');）を設定しようとしたが、それがないと、これは正しいアプローチではないようですLocalStorageの動作と相関しています。何かアドバイス？

Answer 1

問題あなたの問題は、DOMは、バナー要素をレンダリングする前にバナーを非表示にするには、JavaScriptを実行していることですドキュメントの読み込みに存在します。

$(document).ready(function() { 
    $('#button').click(function() { 
    $(this).siblings().slideToggle(function() { 
     localStorage.setItem('display', $('#banner').is(':hidden')); 
    }); 
    }); 
    var block = localStorage.getItem('display'); 
    if (block == 'true') { 
    $('#banner').hide() 
    } 
}); 
$(document).ready(function() { 
    $('#button').click(function() { 
    $('#button').toggleClass('activeClass'); 
    }); 
}); 
$(document).ready(function() { 
    if (!$('#banner').is(':hidden')) { 
    $('#button').addClass('activeClass'); 
    } else if (!$('#banner').is(':visible')) { 
    $('#button').removeClass('activeClass'); 
    } 
}); 

JSFiddle：https://jsfiddle.net/fcewjh7a/17/

Answer 2

jqueryドキュメントレディコールでJavaScriptをラップします。

$(document).ready(function() { 
    $('#button').click(function() { 
     $(this).siblings().slideToggle(function() { 
     localStorage.setItem('display', $('#banner').is(':hidden')); 
     }); 
    }); 
    var block = localStorage.getItem('display'); 
    if (block == 'true') { 
     $('#banner').hide() 
    } 
}); 

フィドル：「activeClass」または「オープン」をトグルし、それかどうかをチェックすることによって解決https://jsfiddle.net/fcewjh7a/3/