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中运行的问题。

我也不知道如何告诉它使用a中h2的类作为cookie值。（目前，Cookie设置为$.cookie(parent, this.className);，会生成名称为container（#sidebar上方的div）和值letter_head的Cookie。它需要类似于“侧边栏”和'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();});

jQuery手风琴和cookie的问题

1 个答案: