使用jquery localStorage時，出現側邊欄導航，然后在頁面加載時消失

Question

我正在使用jQuery localStorage來記住使用以下jQuery代碼的側邊欄導航菜單的切換狀態：

$('#wrapper').toggleClass(window.localStorage.toggled);
$('#menu-toggle').on('click',function(e)
{
    e.preventDefault();
    if (window.localStorage.toggled != "toggled" ) 
    {
        $('#wrapper').toggleClass("toggled", true );
        window.localStorage.toggled = "toggled";
    } 
    else 
    {
        $('#wrapper').toggleClass("toggled", false );
        window.localStorage.toggled = "";
    }
});

通過記住切換狀態，代碼可以正常工作。 刷新頁面時出現問題。 側邊欄導航菜單首先出現，然后消失。 我已經嘗試過在CSS中設置display：none，但似乎不起作用。

相關的html代碼：

<a href="#menu-toggle" class="btn btn-default" id="menu-toggle"><span class="glyphicon glyphicon-th-list"></span></a>

<div id="wrapper">
</div>

Answer 1

以下是我如何實現您的目標。 請注意，我使用了一個片段來組織代碼，但是由於沙箱不允許訪問本地存儲，因此它無法在SO上運行。 但是，您可以通過此操作看到它。

工作jsFiddle

 /** * Feature detect + local reference for simple use of local storage * if (storage) { * storage.setItem('key', 'value'); * storage.getItem('key'); * } */ var storage; var fail; var uid; try { uid = new Date; (storage = window.localStorage).setItem(uid, uid); fail = storage.getItem(uid) != uid; storage.removeItem(uid); fail && (storage = false); } catch (exception) {} /* end Feature detect + local reference */ $(function() { if (storage) { $('#wrapper').toggleClass('isOpen', storage.getItem('isOpen') == '1'); $('#menu-toggle').on('click', function(e) { e.preventDefault(); var setOpen = storage.getItem('isOpen') == '1' ? 0 : 1; // set opento the oposite of current storage.setItem('isOpen', setOpen); $('#wrapper').toggleClass('isOpen', setOpen); }); } }); 

 #wrapper:not(.isOpen) { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#menu-toggle" class="btn btn-default" id="menu-toggle"><span class="glyphicon glyphicon-th-list"></span></a> <div id="wrapper"> some content here </div>