jQuery 手风琴和 cookie 的问题

Question

我有一个来自this 站点的 jQuery 手风琴，并为我的目的进行了编辑，但手风琴仅适用于 Firefox（不是 Safari 或 Chrome），并且 cookie 设置不正确。

这是 jQuery：

            function initMenus() {
                $('#sidebar .letter_index').hide();
                $.each($('#sidebar .letter_index'), function() {
                    var cookie = $.cookie(this.id);
                    if (cookie === null || String(cookie).length < 1) {
                        $('#sidebar .letter_index:first').show();
                    }   else {
                        $('#' + this.id + ' .' + cookie).next().show();
                    }
                });
                $('#sidebar .letter_head').click(function() {
                    var checkElement = $(this).next();
                    var parent = this.parentNode.parentNode.id;

                    if ((checkElement.is('.letter_index')) && (!checkElement.is(':visible'))) {
                        $('#' + parent + ' .letter_index:visible').slideUp('normal');
                            if ((String(parent).length > 0) && (String(this.className).length > 0)) {
                                // not working
                                $.cookie(parent, this.className);
                            }
                        checkElement.slideDown('normal');
                        return false;
                    }
                }
                );
            }
            $(document).ready(function() {initMenus();});

这是我的 HTML 的外观（示例项目）：

            <div id="sidebar">
      <h2 class="letter_head"><a href="#" class="ABC">ABC</h2>
      <ul class="letter_index">
        <li>Abc</li>
        <li>Bcd</li>
      </ul>
            </div>

我找不到脚本无法在 Safari 和 Chrome 中运行的问题。

我也不知道如何告诉它使用h2 中的a 的类作为cookie 值。 （当前 cookie 设置为 $.cookie(parent, this.className);，它生成名称为 container（#sidebar 上方的 div）和值 letter_head 的 cookie。它需要类似于 'sidebar' 和 'ABC'、'DEF '等等。

提前致谢！

Answer 1

我为您发布了demo。我不得不重写一堆代码，因为原始脚本是为使用多个手风琴而编写的，但我假设您只想将此脚本用于一个。无论如何，这是我使用的 HTML：

<div id="container">  
 <div id="sidebar">

  <h2 class="letter_head"><a href="#" class="ABC1">ABC1</a></h2>
  <ul class="letter_index">
   <li>Abc1</li>
   <li>Bcd1</li>
  </ul>

  <h2 class="letter_head"><a href="#" class="ABC2">ABC2</a></h2>
  <ul class="letter_index">
   <li>Abc2</li>
   <li>Bcd2</li>
  </ul>

  <h2 class="letter_head"><a href="#" class="ABC3">ABC3</a></h2>
  <ul class="letter_index">
   <li>Abc3</li>
   <li>Bcd3</li>
  </ul>

 </div>  
</div>

脚本：

function initMenus() {
 var sidebar = $('#sidebar');
 sidebar.find('ul.letter_index').hide();
 var cookie = $.cookie( sidebar.attr('id') );
 if (cookie === null || String(cookie).length < 1) {
  sidebar.find('.letter_index:first').show();
 } else {
  sidebar.find(('h2 > a.' + cookie)).parent().next().show();
 }

 sidebar.find('h2.letter_head').click(function(){
  var checkElement = $(this).next();
  if ((checkElement.is('.letter_index')) && (!checkElement.is(':visible'))) {
   sidebar.find('.letter_index:visible').slideUp('normal');
   var headClassName = $(this).find('a').attr('class').trim();
   if (headClassName.length > 0) {
    $.cookie( sidebar.attr('id'), headClassName );
   }
   checkElement.slideDown('normal');
   return false;
  }
 });
}
$(document).ready(function() {initMenus();});