Проблема с jQuery аккордеон и cookies

Question

У меня есть аккордеон jQuery от this сайт и отредактирован для моих целей, но аккордеон работает только в 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);, который производит файлы cookie с именем container (div выше #sidebar) и значением letter_head. Он должен быть чем-то вроде «боковой панели» и «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();});