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();
    }
});

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

1 个答案: