使用 .toggle() 时为可折叠的 jQuery 菜单设置 cookie

Question

我正在尝试在可折叠的垂直列表上设置 cookie，我正在使用 .toggle() 隐藏和显示列表以及 jQuery Cookie Plugin。我有像这样的非常简单的导航：

<ul class="menu-sidebar">
  <li>Item 1</li>
  <li><a href="#">Item 2</a>
    <ul>
      <li>Item 2.1</li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>
    <ul>
      <li>Item 3.1</li>
    </ul>
 </li>
 <li>Item 4</li>
</ul>

使用以下 CSS：

.js .menu-sidebar li ul{display:none;}

然后我像这样切换列表：

jQuery(document).ready(function(){
  $('.menu-sidebar li:has(ul) a').click(function(){
    $(this).next().toggle();
  });
});

它很简单而且效果很好，但我真的不知道如何在上面设置 cookie。我一直在尝试这样做：

$('.menu-sidebar li:has(ul) a').click(function(){
  $(this).next().toggle();

  if ($(this).next().is(':visible')){
    $.cookie('verticalNav', 'expanded');
  }

  if ($(this).next().is(':hidden')){
    $.cookie('verticalNav', 'collapsed');
  }

  var verticalNav = $.cookie('verticalNav');
  if (verticalNav == 'expanded'){
    $(this).next().show();
  }
});

没有运气。有小费吗？谢谢！ :)

Answer 1

从 click() 方法中取出最后一个块。里面是多余的。 （当然，将其全部包装在 $(document).ready(function() {...}); 块中。）

更新：此代码将通过为每个子菜单分配不同的 cookie 值来处理多个子菜单。 http://jsfiddle.net/GDudf/13/

$('.menu-sidebar li:has(ul) a').click(function() {
    $(this).next().toggle();
    if ($(this).next().is(':visible')) {
        $.cookie($(this).text(), 'expanded');
    }

    if ($(this).next().is(':hidden')) {
        $.cookie($(this).text(), 'collapsed');
    }
});

$('.menu-sidebar > li').each(function() {
    var verticalNav = $.cookie( $(this).children('a').text() );
    if (verticalNav == 'expanded') {
        $(this).find('ul').show();
    }
});