Question

我在用CSS设置的div中有一个CSS菜单：display：none;在页面加载。

我有这个HTML：

<a class="show_menu">Show Menu</a>
<a class="hide_menu" style="display:none;">Hide Menu</a>

<div id="nav" style="display:none;">
div content here
</div

和这个JQUERY：

<script type = "text/javascript">
$('.show_menu').click(function() {
   $('#nav').toggle();
   $("#page_cont").css("width", "80%");
   $(".hide_menu").css("display", "block");
   $(".show_menu").css("display", "none");
});
$('.hide_menu').click(function() {
   $('#nav').toggle();
   $("#page_cont").css("width", "100%");
   $(".hide_menu").css("display", "none");
   $(".show_menu").css("display", "block");
});
</script>

当显示或隐藏div时，查看cookie的最佳方式是什么，以便当用户更改页面时，如果他们打开菜单，它将在另一页上保持打开状态，如果他们关闭菜单，它将关闭在所有其他页面上，直到他们再次打开它？

编辑：这是我的新代码

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>

<script>
var menu_state = $.cookie('mydomain_menuflag');
alert(menu_state);
if(menu_state !== "undefined" && menu_state == "visible" ) $('#nav').show;
</script>

<div class="show_menu"><a>Show Menu</a></div>
<div class="hide_menu" style="display:none;"><a>Hide Menu</a></div>

<div id="nav" style="display:none;">
<li><a href="/admin/index.php">Dashboard</a></li>
<li><a>Contacts</a>
    <ul>
    <li><strong>Companies</strong></li>
    <li><a href="/admin/index.php?id=customer/addcustomer">Add Company</a></li>
    <li><a href="/admin/index.php?id=customer/viewcustomer">View Company</a></li>
    <li><strong>Contacts</strong></li>
    <li><a href="/admin/index.php?id=contacts/addcontact">Add Contact</a></li>
    <li><a href="/admin/index.php?id=contacts/viewcontact">View Contact</a></li>
    <li><strong>Resellers</strong></li>
    <li><a href="/admin/index.php?id=reseller/addreseller">Add Reseller</a></li>
    <li><a href="/admin/index.php?id=reseller/viewreseller">View Reseller</a></li>
    <li><strong>Salesman</strong></li>
    <li><a href="/admin/index.php?id=salesman/addsalesman">Add Salesman</a></li>
    <li><a href="/admin/index.php?id=salesman/viewsalesman">View Salesman</a></li>
    </ul>
</li>
<li><a>Customer Info</a>
    <ul>
    <li><a href="/admin/index.php?id=customer/commsone-phonelines">Comms One Phone Lines</a></li>
    </ul>
</li>

</div>

<script type = "text/javascript">
$('.show_menu').click(function() {
   $('#nav').toggle();
   $("#page_cont").css("width", "80%");
   $(".hide_menu").css("display", "block");
   $(".show_menu").css("display", "none");
   $.cookie('mydomain_menuflag', 'visible');
   var menu_state = $.cookie('mydomain_menuflag');
   alert(menu_state);
});
$('.hide_menu').click(function() {
   $('#nav').toggle();
   $("#page_cont").css("width", "100%");
   $(".hide_menu").css("display", "none");
   $(".show_menu").css("display", "block");
   $.cookie('mydomain_menuflag', 'hidden');
});
</script>

Answer 1

试试这个lib：https://github.com/carhartl/jquery-cookie

在您的节目事件功能中设置您的Cookie：

$.cookie('mydomain_menuflag', 'visible');

并隐藏：

$.cookie('mydomain_menuflag', 'hidden');

并在文档加载中进行初步检查

var menu_state = $.cookie('mydomain_menuflag');
if( typeof menu_state !== "undefined" && menu_state == "visible" ) $('#nav').show;

我没有测试过，所以如果我留下了一个bug，请告诉我。

编辑：

以下是应该执行此操作的完整代码：

<script type = "text/javascript">

$( document ).ready(function() {

  // setup the initial display on page load
  var menu_state = $.cookie('mydomain_menuflag');

  if( typeof menu_state !== "undefined" && menu_state == "visible" ) {
    $('#nav').show; // visible, and cookie is set
  } else {
    $('#nav').hide; // hidden or cookie is not set, set just in case
    $.cookie('mydomain_menuflag', 'hidden'); // update (or set) the cookie
  }

  // listen for the clicks
  $('.show_menu').click(function() {
     $('#nav').toggle();
     $.cookie('mydomain_menuflag', 'visible'); // update (or set) the cookie
     $("#page_cont").css("width", "80%");
     $(".hide_menu").css("display", "block");
     $(".show_menu").css("display", "none");
  });
  $('.hide_menu').click(function() {
     $('#nav').toggle();
     $.cookie('mydomain_menuflag', 'hidden'); // update (or set) the cookie
     $("#page_cont").css("width", "100%");
     $(".hide_menu").css("display", "none");
     $(".show_menu").css("display", "block");
  });

});

</script>

并在头标记中添加此行：<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>

我通常会建议下载并链接该库的本地副本，但上面的内容应该会让您启动并开始运行。

编辑2：

这是一个工作小提琴：http://jsfiddle.net/YZenq/1/

注意：JSFiddle 不与您的网页相同。

小提琴不需要准备文件，因为他们的代码处理它。您的页面应该使用它，但将所有代码放在一个而不是多个。
小提琴不允许您更改文档头（<head> ... </head>）。小提琴在左侧有一个外部资源选项，与我为您提供链接的库做同样的事情。在一个小提琴上，你只需输入URL（即脚本标签的src属性中的代码）。但是你需要添加整个脚本标记，链接到库的较小的标记，就在head标记的末尾。

这有意义吗？

编辑3：

更新了更改以停止设置多个Cookie实例：http://jsfiddle.net/YZenq/2/

在jquery中为show / hide div设置cookie

1 个答案:

编辑：

编辑2：

编辑3：