Question

我在我的网站上使用此链接和div：

<p><a href="#" class="navlink" id="navlink_1">Menu1</a> | <a href="#" class="navlink" id="navlink_2">Menu2 |</a><a href="#" class="navlink" id="navlink_5"> Menu 3|</a></p>

<div id="menu_1" class="mymenu">
</div>
<div id="menu_2" class="mymenu">
</div>
<div id="menu_3" class="mymenu">
</div>

这个jquery隐藏并显示菜单。

$('div[class*="mymenu"]').hide(); 
 var current;
       var showMenu = function(e) {
    // read the id out of the clicked elements id ('navlink_ID')
        var id = e.id.split('_');
        $('div#menu_' + id[1]).show();
    // store this element as new current visible
        current = e;
      }

      // hide all menu elements
      $('div.mymenu').hide();
      $('a.navlink').click(function() {
        if (this != current) {
          // check if an element is visible -> hide it and show new menu
          if (current) {
            var id = current.id.split('_');
            $('div#menu_' + id[1]).hide(200,showMenu(this));
          } else {
            showMenu(this);

          }
        }
        return false;
      });

如何修改此代码，如果我重新加载页面，则最后一个可见的DIV保持可见。（我不想为此使用查询字符串。我尝试使用jquery会话但不工作..）

谢谢你的帮助......

Answer 1

Cookie是保存可折叠div的理想方式，ShopDev有一个很好的教程，可以使用jQuery cookie插件来实现与尝试相同的操作。

基本上，您在cookie中为要保留的每个div设置一个值，并且每当事件发生时，您都会更新cookie中的值，例如：

$.cookie('menu_1', 'expanded');

此外，您还需要检查页面首次加载时每个div的状态，例如

var menu_1 = $.cookie('menu_1');

if (menu_1 == 'collapsed') {
    $('#menu_1').css("display","none");
};

Answer 2

最简单的纯JavaScript方式：设置cookie。

Jquery - 隐藏/显示 - “会话”问题

2 个答案: