創建cookie來控制jQuery的切換內容

我想補充一點，我的控制可摺疊內容是否被顯示或隱藏的cookie。顯示網站加載時的默認值。我已嘗試並未能實現cookie，因此原始代碼如下所示。創建cookie來控制jQuery的切換內容

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".toggle_parent").toggle(function(){ 
     $(".toggled_content").slideUp(); 
     $("img.upmid").attr('src',"images/downmid.png"); 
    },function(){ 
     $(".toggled_content").slideDown(); 
     $("img.upmid").attr('src',"images/upmid.png"); 
    }); 
    }); 
</script>

來源

2012-07-27 user1558300

您可以通過每次狀態更改設置cookie的值，並檢查該cookie的值在頁面加載時設置的初始狀態相匹配的預先設定的cookie值不喜歡這樣寫道：

添加這個CSS通過封閉來使默認狀態，所以如果需要的最終狀態是封閉的，它最初不會顯示爲打開，然後關閉：

.toggled_content {display: none;}

添加此javascript：

<script type="text/javascript"> 
    $(document).ready(function(){ 

     function hideContent() { 
      $(".toggled_content").slideUp(); 
      $("img.upmid").attr('src',"images/downmid.png"); 
     } 

     function showContent() { 
      $(".toggled_content").slideDown(); 
      $("img.upmid").attr('src',"images/upmid.png"); 
     } 

     // set initial state based on cookie value 
     // assumes default state is closed 
     if (readCookie("updown") == "down") { 
      showContent(); 
     } 

     $(".toggle_parent").toggle(function(){ 
      hideContent(); 
      createCookie("updown", "up", 30) 
     },function(){ 
      showContent(); 
      createCookie("updown", "down", 30); 
    }); 
    }); 


function createCookie(name,value,days) { 
    if (days) { 
     var date = new Date(); 
     date.setTime(date.getTime()+(days*24*60*60*1000)); 
     var expires = "; expires="+date.toGMTString(); 
    } 
    else var expires = ""; 
    document.cookie = name+"="+value+expires+"; path=/"; 
} 

function readCookie(name) { 
    var nameEQ = name + "="; 
    var ca = document.cookie.split(';'); 
    for(var i=0;i < ca.length;i++) { 
     var c = ca[i]; 
     while (c.charAt(0)==' ') c = c.substring(1,c.length); 
     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); 
    } 
    return null; 
} 

function eraseCookie(name) { 
    createCookie(name,"",-1); 
} 

</script>

來源

2012-07-27 17:17:26 jfriend00

輝煌，曾立竿見影。僅僅爲了美觀，會有更好的方法來保持div在加載時關閉。目前，如果切換關閉，其負載打開，然後滑回？ – user1558300 2012-07-27 17:29:22

@ user1558300 - 我修改了我的答案，以便初始狀態關閉，因此如果所需的最終狀態關閉，它將保持關閉狀態。如果所需的最終狀態是打開的，它將在頁面加載時打開。 – jfriend00 2012-07-27 17:39:15

去商店，買的是隨機的cookies的包。當你來吃每一個，如果餅乾含有巧克力崩潰的內容，否則擴大它。：P

在一個更嚴重的是，我建議the jQuery cookies plugin - 這允許您設置，獲取或刪除cookies。在父母身上放置一個ID，並在摺疊內容時在該名稱中設置一個包含該ID的cookie。取消擴展。在頁面加載時檢查cookie;如果存在，請執行slideUp調用等。

您可能還想查看jQuery UI - 有一些用於顯示和隱藏內容的有用功能，例如手風琴。

來源

2012-07-27 17:18:53 ClarkeyBoy

還要注意的是，根據瀏覽器支持，您不妨看看localStorage的 - 如果你不需要在服務器上的Cookie這可以降低開銷有用。 – ClarkeyBoy 2012-07-27 17:23:21

如果你不介意使用jQuery插件，你可以使用jquery-cookie。使用非常簡單。

設置一個cookie：

$.cookie("cookie name", "value");

得到一個餅乾值：

alert($.cookie("cookie name"));

來源

2012-07-27 17:19:49 tjscience

創建cookie來控制jQuery的切換內容

回答

相關問題