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