如何實現jQuery邊欄和Cookies

Question

我已經通過jQuery API設置了側邊欄。 現在我注意到，刷新頁面時，側欄將自動關閉。

我在互聯網上發現了Cookie的內容，但由於某種原因，它無法與我的側邊欄腳本一起使用。

我究竟做錯了什么？

$(document).ready(function() {
    var sidebar_status = $.cookie("sidebar_status");

    if (sidebar_status == null) {
        $("a#ToggleSidebar").addClass('closed');
        $("#sidebar").hide();
    };

    if (sidebar_status == "closed") {
        $("a#ToggleSidebar").removeClass('open');
        $("a#ToggleSidebar").addClass('closed');
        $("#sidebar").css("display", "none");
    };

    if (sidebar_status == "open") {
        $("a#ToggleSidebar").addClass('open');
    };


    $("a#ToggleSidebar").click(function() {
        if ($("a#ToggleSidebar").attr("class") == 'open') {
            $(this).removeClass('open');
            $(this).addClass('closed');
            $.cookie("sidebar_status", "closed", {
                path: '/',
                expires: 100
            });
            $("#sidebar").animate({
                width: 'hide',
                opacity: 'hide'
            }, 'slow');
        } else {
            $(this).removeClass('closed');
            $(this).addClass('open');
            $.cookie("sidebar_status", "open", {
                path: '/',
                expires: 100
            });
            $("#sidebar").animate({
                width: 'show',
                opacity: 'show'
            }, 'slow');
        }
    });

編輯：

像按鈕<a href="#"></a>這樣的東西應該打開<div></div> 。 現在，我希望當有人第一次訪問該頁面時， <div></div>將關閉。 當用戶單擊<a href="#"></a>它將打開<div></div>並保存一個cookie。 當用戶現在應該刷新頁面時， <div></div>應該保持打開狀態，直到用戶使用<a href="#"></a>再次將其關閉。 那就是我無法上班的地方。

Answer 1

OP的評論： 現在側邊欄打開，並且cookie被保存在計算機上，但是當我嘗試再次關閉側邊欄時，什么也沒有發生 。

對於jQuery 1.6及更高版本，此...

if ($("a#ToggleSidebar").attr("class") == 'open') {

應該是這個（用prop代替attr ）...

if ($("a#ToggleSidebar").prop("class") == 'open') {

但這是最好的...

if ($("a#ToggleSidebar").hasClass("open")) {

---

這個...

$(this).removeClass('open');
$(this).addClass('closed');

...可以簡單地寫成這樣（稱為鏈接）...

$(this).removeClass('open').addClass('closed');

---

當我們在...

這個：

if (sidebar_status == null) {
    $("a#ToggleSidebar").addClass('closed');
    $("#sidebar").hide();
};

if (sidebar_status == "closed") {
    $("a#ToggleSidebar").removeClass('open');
    $("a#ToggleSidebar").addClass('closed');
    $("#sidebar").css("display", "none");
};

if (sidebar_status == "open") {
    $("a#ToggleSidebar").addClass('open');
};

可以這樣寫

if (sidebar_status == null) {
    $("a#ToggleSidebar").addClass('closed');
    $("#sidebar").hide();
} else if (sidebar_status == "closed") {
    $("a#ToggleSidebar").removeClass('open').addClass('closed');
    $("#sidebar").hide();
} else if (sidebar_status == "open") {
    $("a#ToggleSidebar").addClass('open').removeClass('closed');
};

（jQuery .hide() 等同於 jQuery .css("display", "none"); ）

Answer 2

檢查我的答案，這與jquery cookie插件及其使用情況相同。 希望它能幫助或指導您朝正確的方向發展。