如何實現jQuery補充工具欄和Cookies

我已經通過jQuery API安裝了一個工具條。現在我注意到，當我刷新頁面時，側欄會自動關閉。如何實現jQuery補充工具欄和Cookies

我在互聯網上發現了一個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>再次關閉它。這是我無法工作的。

來源

2011-12-11 C.Felix

什麼是不工作？發生了什麼，你期望發生什麼？ – jmacinnes

@ C.Felix，當評論要求澄清時，您可以通過編輯將其添加到原始文章中;特別是如果你需要發佈更多的代碼。 – Sparky

看看這個答案雖然不是你的問題的解決方案，但同樣的問題的替代實現http://stackoverflow.com/a/8462362/406659 – aWebDeveloper

評論：現在側邊欄打開，一個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'); 
};

...可以這樣寫THI小號....

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()is equivalent to jQuery的.css("display", "none");）

來源

2011-12-12 18:19:08 Sparky

非常感謝！我正在閱讀jQuery頁面，因爲電子郵件告訴我有一個新的答案:) –

查看我的回答here這與jquery cookie插件的相同情況以及如何使用它。希望它有助於或至少引導你朝着正確的方向前進。從OP

來源

2011-12-11 16:41:29 Andres

簡單地鏈接到另一個SO答案的SO答案並不理想。答案應該完全獨立。 – Sparky

這是我自己的回答，我在另一個帖子上提出了關於cookies ..我應該剛剛複製/粘貼我自己的答案？ – Andres

爲什麼不呢？畢竟這是你的回答。 – Sparky

如何實現jQuery補充工具欄和Cookies

回答

相關問題