如何记住用cookie显示和隐藏div [英] How to remember show and hide div with cookie

问题描述

我有HTML：

 < div id ='mainleft-content'>内容可见< / div> ; 
< div id =expand-hidden>按钮展开+< / div> 
  

我使用Jquery来显示/隐藏div：

  $（document）.ready（function（）{
 $（＃expand-hidden （＃mainleft-content）toggle（）; 
}）; 
}）; 
  

我想使用cookie来记住div的状态是隐藏或显示访问者的操作。 p>

我该如何做呢？非常感谢您的帮助。

请参阅 JSFIDDLE

解决方案

这里正在工作fiddle

您可以使用 is（：visible）将返回您是否可见div：

  if（$（＃mainleft-content）。is（ visible））{
 alert（'visible'）; 
} 
 else {
 alert（'div is hidden'）; 
} 
  

如果您仍需要Cookie，可以添加一个函数：

  function setCookie（c_name，value，exdays）{
 var exdate = new Date（）; 
 exdate.setDate（exdate.getDate（）+ exdays）; 
 var c_value = escape（value）+（（exdays == null）？：; expires =+ exdate.toUTCString（））; 
 document.cookie = c_name +=+ c_value; 
} 
 
 function getCookie（c_name）{
 var i，x，y，ARRcookies = document.cookie.split（;）; 
 for（i = 0; i  x = ARRcookies [i] .substr（0，ARRcookies [i] .indexOf（=））; 
 y = ARRcookies [i] .substr（ARRcookies [i] .indexOf（=）+ 1）; 
 x = x.replace（/ ^ \s + | \s + $ / g，）; 
 if（x == c_name）{
 return unescape（y）; 
} 
} 
} 
  

/ p>

  $（document）.ready（function（）{
 $（＃expand-hidden）。 function（）{
 $（＃mainleft-content）toggle（）; 
 SetCookie（DivStateVisible，$（＃mainleft-content）。is（：visible 5）; 
}）; 
}）;使用      com / carhartl / jquery-cookierel =nofollow> jquery-cookie ：
  function setCookie ，value，exdays）{
 $ .cookie（c_name，value，{expires：exdays}）; 
} 
 
 function getCookie（c_name）{
 return $ .cookie（c_name）; 
} 
  
 
I have HTML like :
<div id='mainleft-content'>content is visible</div>
<div id="expand-hidden">Button Expand +</div>
And I use Jquery to show/hide div like :
 $(document).ready(function () {
    $("#expand-hidden").click(function () {
        $("#mainleft-content").toggle();
    });
});
I want use cookie to remember the state of div is hide or show of visitors' manipulate.

How can I do it? Thank for your help.

See JSFIDDLE
解决方案
Here is working fiddle

You may use is(":visible") for this purpose, it will return you whether div is visible or not:
if ( $("#mainleft-content").is(":visible") ){
   alert('its visible');
}
else{
   alert('div is hidden');
}
if you still need the cookies, you may add a function:
function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}
and set the cookie:
$(document).ready(function () {
    $("#expand-hidden").click(function () {
        $("#mainleft-content").toggle();
        SetCookie("DivStateVisible", $("#mainleft-content").is(":visible"),5);
    });
});
with jQuery using jquery-cookie:
function setCookie(c_name, value, exdays) {
    $.cookie(c_name, value, { expires : exdays });
}

function getCookie(c_name) {
    return $.cookie(c_name);
}


                        
这篇关于如何记住用cookie显示和隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！