问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

我想用jqcookie存一个变量，点击按钮是页面刷新是显示，再点击按钮是页面刷新是隐藏

头像
feifei
    11411324
    头像
    月影
      2.7k1724
      $(document).ready(function () {
    $(function () {
        $(".triangle").click(function () {
            $(".switch").hide();
        }, function () {
            $(".switch").show();
        });
    });
      $.cookie("toggle", triangle, { expires: 10, path: '/' });
      var swtoggle = $.cookie("toggle");
      if (swtoggle) {
          $(".switch").show();
      }
   
});

      dom结构

      <li class="triangle" id="triangle">
    <a href="/Campaign/Crme" onclick="" id="toggle">
     <i class="fa fa-bar-chart"></i><label class="nav-label">@Html.CustomText("Prospect_CampaignManage")</label><span class=""></span>
      </a>
 </li>
 <li class="switch" id="ulstatistics" style="display:none">
      <a href="/Campaign/Campaign">
        <i class="fa fa-bar-chart1" style="width:16px;"></i><label class="nav-label">@Html.CustomText("Campaign_New_Search")</label><span class=""></span>
    </a>
</li>
      htmljavascript
      阅读 2.4k
      2 个回答
      得票最新
      头像
      spencerht
        7.8k2728
        ✓ 已被采纳
        1. 一个是你的expires设置不对，应该是date形式，如果是数值形式应该是max-age，以秒为单位。mdn地址
          2.另外是应该是click时候写入cookie或是删除cookie，而不是document.ready时候。

        以上。手机上面回答真是难受?

        补充：
        第一条我看错了，如果是jq的cookie插件的话，expires也是可以直接用数值，单位是天。

        补充2：
        回家之后来补一发代码，另外一定要记得不能以files://的协议打开，因为这样是没有cookie的。
        然后就是lz的点击元素中有a标签，我暂时去掉了，虽然觉得这个交互逻辑有点诡异。

        <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
<li class="triangle" id="triangle">
  <a href="javascript:;" onclick="" id="toggle">
    <i class="fa fa-bar-chart"></i><label class="nav-label">Prospect_CampaignManag</label><span class=""></span>
  </a>
</li>
<li class="switch" id="ulstatistics" style="display:none">
  <a href="/Campaign/Campaign">
    <i class="fa fa-bar-chart1" style="width:16px;"></i><label class="nav-label">Campaign_New_Search</label><span class=""></span>
  </a>
</li>
<script>
$(function () {
    $(".triangle").click(function () {
      if ($.cookie("toggle")) {
        $(".switch").hide();
        $.cookie("toggle", '');
      } else {
        $(".switch").show();
        $.cookie("toggle", "2", { expires: 7, path: '/' });
      }
    });
    var swtoggle = $.cookie("toggle");
    if (swtoggle) {
      $(".switch").show();
    }
});

    </script>
</html>

        操作如下图
        图片描述

        头像
        月影
          2.7k1724

          jquery cookies操作实例

          <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
        $(function () {
            $(".triangle").click(function(){
                getCookie()
            });
        })

    function getCookie() {
        var cookieToggle = $.cookie("toggle");
        
        if (  cookieToggle === "null" || cookieToggle === "undefined") {
            console.log('1111111111',cookieToggle);
            $(".switch").hide();
            $.cookie('toggle', 'triangle');
            
            }else{
            console.log('22222',cookieToggle);
            $(".switch").show();
            $.cookie('toggle', null); //删除一个cookie

            }
    }
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题