jQuery手风琴和饼干问题

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);，其产生的Cookie名称为container（#sidebar以上的div）和值letter_head，它需要像'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();});