Question

我有Javascript cookie的问题。我的脚本无法正常工作。代码仅在我删除所有cookie设置时才有效。

html部分：隐藏/显示div

<div id="toolo"> 
    text 1
    <button id="hide">Open</button>           
</div>
<div id="toolo2">
    text 2
    <button id="show">Hide</button>
</div>

Javascript代码：我希望在页面加载时显示div＆＃34; toolo＆＃34;，但是当用户隐藏div＆＃34; tolo＆＃34;时，将仅显示div＆＃34; toolo2＆＃34;。

// if open div cookie
if($.cookie('state') == 'open'){
    $("#toolo").show();
    $("#toolo2").hide();
} 
// if close div cookie
else if ($.cookie('state') == 'closed') {
    $("#toolo").hide();
    $("#toolo2").show();
}
//firs time page loading    
else {  
    $("#toolo2").hide();  
}   
// hide button 
$("#hide").click(function(){
    $("#toolo").hide();
    $("#toolo2").show();
    $.cookie('state', 'open', { expires:3 });
    return false;  
});
// show button
$("#show").click(function(){
    $("#toolo").show();
    $("#toolo2").hide();   
    $.cookie('state', 'closed', { expires:3 })
    return false;
});

http://jsfiddle.net/h1foecn7/17/

Answer 1

您似乎没有设置Cookie。

请参阅更新的小提琴：

http://jsfiddle.net/h1foecn7/18/

包括jquery-cookie.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

设置Cookie

   // onload js
$.cookie('state', 'closed');

Answer 2

您需要使用Jquery Cookie。包括它 -

https://github.com/js-cookie/js-cookie

之后它会起作用我希望。

Answer 3

假设您已正确安装jquery.js和jquery.cookie.js，请尝试此操作 - 我为您的节目和隐藏按钮提供了一个切换类

FIDDLE

$(function() {
  var state = $.cookie('state');
  var open = state == "open";
  $("#toolo").toggle(open);
  $("#toolo2").toggle(!open);

  $(".toggle").on("click",function(e){
    e.preventDefault();
    var open = this.id=="show";
    $("#toolo").toggle(open);
    $("#toolo2").toggle(!open);
    $.cookie('state', open?"open":"closed", { expires:3 });
  });
});

请注意，下面的代码段不会在SO上运行，但如果将其复制到服务器则会运行

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Demo by mplungjan</title>
  
  <script type='text/javascript' src='//code.jquery.com/jquery-2.1.3.js'></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    
  <script type='text/javascript'>


$(function() {
  var state = $.cookie('state');
  var open = state == "open";
  $("#toolo").toggle(open);
  $("#toolo2").toggle(!open);

  $(".toggle").on("click",function(e){
    e.preventDefault();
    var open = this.id=="show";
      console.log(open,this.id)
    $("#toolo").toggle(open);
    $("#toolo2").toggle(!open);
    $.cookie('state', open?"open":"closed", { expires:3 });
  });
});
</script>


</head>
<body>
  <div id="toolo"> text 1
   <button class="toggle" id="hide">Open</button>           
  </div>
  <div id="toolo2">
     text 2
    <button class="toggle" id="show">Hide</button>
  </div>
</body>
</html>

＆＃13;

Answer 4

你的名字搞得一团糟......试试这个（在JSFiddle中测试并运作）

＆＃13;

// if open div cookie
if($.cookie('state') == 'opened'){
  $("#toolo").show();
  $("#toolo2").hide();
} 
// if close div cookie
else if ($.cookie('state') == 'closed') {
  $("#toolo").hide();
  $("#toolo2").show();
}
//first time page loading    
else {  
  $("#toolo2").hide(); 
}

// hide button 
$("#hide").click(function(){
  $("#toolo").hide();
  $("#toolo2").show();
  $.cookie('state', 'closed', { expires:3 });
  return false;  
});
// show button
$("#show").click(function(){
  $("#toolo").show();
  $("#toolo2").hide();   
  $.cookie('state', 'opened', { expires:3 })
  return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<div id="toolo"> 
  Text 1
  <button id="hide">Hide</button>           
</div>

 <div id="toolo2">
  Text 2
  <button id="show">Open</button>
</div>

＆＃13;

Javascript cookie show / hide onclick

4 个答案: