Question

我正在尝试将jquery .cookies添加到我现有的折叠/展开菜单中，但对于我的生活，我无法看到我失败的地方。

任何人都可以帮我解决这个问题吗？我现在一直在寻找不到9个小时的代码，这是我今天应该写的最后一篇。我担心我的大脑确实达到了它的极限，但我无法忍受将工作完成。这可能很容易，我看不到它。

我将cookie设置为visible_state以及应该发生什么，每当用户点击展开/折叠/切换菜单区域时，它都会将cookie存储为类。

修改：我忘了提及...... cexpand =扩展的cookie类...

ccollapse - 已折叠的Cookie类

我原来的.js（工作菜单）

$(document).ready(function() {
setTimeout(function() {
  // Grow/Shrink
  $('#menu3 > li > a.expanded + ul').show('blind');
  $('#menu3 > li > a.collapsed + ul').hide('blind');
  $('#menu3 > li > a').click(function() {
  $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').toggle('blind');
});
$('.expand_all').click(function() {
$('#menu3 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').show('blind');
});
$('.collapse_all').click(function() {
$('#menu3 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').hide('blind');
});
}, 0);
});

我的新.js

$(document).ready(function() {
var visible_state = $.cookie("visible_state");
setTimeout(function() {
if ($('.expanded').attr('class')=='cexpand'){
  $(this).removeClass('cexpand');
  $(this).addClass('ccollapse');
  $.cookie('visible_state', 'ccollapse', { path: '/', expires: 100});
  $(this).hide('blind');
} else if ($('.collapsed').attr('class')=='ccollapse'){
  $(this).removeClass('ccollapse');
  $(this).addClass('cexpand');
  $.cookie('visible_state', 'cexpand', { path: '/', expires: 100 });
  $(this).show('blind');        
}   
  $('#menu3 > li > a.expanded + ul').show('blind');
  $('#menu3 > li > a.collapsed + ul').hide('blind');    
  $('#menu3 > li > a').click(function() {
  $(this).toggleClass('expanded', 'cexpand').toggleClass('collapsed', 'ccollapse').parent().find('> ul').toggle('blind');
});

$('.expand_all').click(function() {
  $('#menu3 > li > a.collapsed').addClass('expanded', 'cexpand').removeClass('collapsed', 'ccollapse').parent().find('> ul').show('blind');
});
$('.collapse_all').click(function() {
  $('#menu3 > li > a.expanded').addClass('collapsed', 'ccollapse').removeClass('expanded', 'cexpand').parent().find('> ul').hide('blind');
});
}, 0);
});

* *编辑 * close.js ***

 $(document).ready(function() {

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

 if (visible_state == null){
$('#menu3 > li > a').addClass('collapsed');
$('#menu3 > li > a + ul.1').addClass('expanded');

 };

 if (visible_state == 'collapsed'){
$('#menu3 > li > a').removeClass('expanded');
$('#menu3 > li > a').addClass('collapsed');

$.cookie('visible_state', 'collapsed', { path: '/', expires: 100 });
 };
  if (visible_state == 'expanded'){
$('#menu3 > li > a').addClass('expanded');
$.cookie('visible_state', 'expanded', { path: '/', expires: 100 });
 };

 $('#menu3 > li > a').click(function() {
 if ($('#menu3 > li > a').attr('class')=='expanded'){
$(this).removeClass('expanded');
$(this).addClass('collapsed');
$.cookie('visible_state', 'collapsed', { path: '/', expires: 100 });

} else{
$(this).removeClass('collapsed');
$(this).addClass('expanded');
$.cookie('visible_state', 'expanded', { path: '/', expires: 100 });

}
});

$('#menu3 > li > a.expanded + ul.1').show('blind');
$('#menu3 > li > a.expanded + ul.2').show('blind');
$('#menu3 > li > a.expanded + ul.3').show('blind');
$('#menu3 > li > a.expanded + ul.4').show('blind');
$('#menu3 > li > a.expanded + ul.5').show('blind');
$('#menu3 > li > a.collapsed + ul.1').hide('blind');
$('#menu3 > li > a.collapsed + ul.2').hide('blind');
$('#menu3 > li > a.collapsed + ul.3').hide('blind');
$('#menu3 > li > a.collapsed + ul.4').hide('blind');
$('#menu3 > li > a.collapsed + ul.5').hide('blind');

$('.expand_all').click(function() {
  $('#menu3 > li >           a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('>   ul').show('blind');
  $.removeCookie('visible_state');
  $.cookie('visible_state', 'expanded', { path: '/', expires: 100 });
});
$('.collapse_all').click(function() {
  $('#menu3 > li >   a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').hide('blind');
  $.removeCookie('visible_state');
  $.cookie('visible_state', 'collapsed', { path: '/', expires: 100 });
});
});

我的.html

<div id="leftnav" style="clear:left;">
<div id="wrapper">
  <ul id="menu3" class="leftnavmenu">
    <li class="leftnavitem1"><a href="#" class="expanded">Category 1 <span>1</span>   </a>
      <ul>
    <li class="subitem1"><a href="#">Link 1 <span>1</span></a></li>
    <li class="subitem2"><a href="#">Link 2 <span>1</span></a></li>
    <li class="subitem3"><a href="#">Link 3 <span>1</span></a></li>
      </ul
    </li>
    <li class="leftnavitem2"><a href="#" class="expanded">Category 2 <span>1</span></a>
      <ul>
    <li class="subitem1"><a href="#">Link 1 <span>1</span></a></li>
    <li class="subitem2"><a href="#">Link 2 <span>1</span></a></li>
    <li class="subitem3"><a href="#">Link 3 <span>1</span></a></li>
      </ul>
    </li>
        <li class="leftnavitem3"><a href="#" class="collapsed">Category 3 <span>1</span></a>
      <ul>
    <li class="subitem1"><a href="#">Link 1 <span>1</span></a></li>
    <li class="subitem2"><a href="#">Link 2 <span>1</span></a></li>
    <li class="subitem3"><a href="#">Link 3 <span>1</span></a></li>
      </ul>
    </li>
    <li class="leftnavitem4"><a href="#" class="collapsed">Category 4  <span>1</span></a>
      <ul>
        <li class="subitem1"><a href="#">Link 1 <span>1</span></a></li>
    <li class="subitem2"><a href="#">Link 2 <span>1</span></a></li>
    <li class="subitem3"><a href="#">Link 3 <span>1</span></a></li>
      </ul>
    </li>
    <li class="leftnavitem5"><a href="#" class="collapsed">Category 5 <span>1</span></a>
      <ul>
            <li class="subitem1"><a href="#">Link 1 <span>1</span></a></li>
    <li class="subitem2"><a href="#">Link 2 <span>1</span></a></li>
        <li class="subitem3"><a href="#">Link 3 <span>1</span></a></li>
          </ul>
    </li>
  </ul>
 </div>

我会精神上买咖啡吗？对于任何结束我的苦难的人来说。

Answer 1

$.cookie不存在。您使用的是哪个插件？

否则我建议使用Amplify JS Store。 Cookie不是在Html 5时代存储东西的最佳方式。

在折叠/展开菜单上设置jQuery Cookie（复杂）

1 个答案: