jQuery 아코디언 및 쿠키 관련 문제

Question

this 사이트의 jQuery 아코디언이 있는데 내 용도로 편집되었지만 아코디언은 Firefox에서만 작동하며 (Safari 또는 Chrome이 아님) 쿠키가 올바르게 설정되지 않았습니다.

이

은 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> 

및 크롬.

쿠키 값으로 h2 안에 a 클래스를 사용하는 방법을 알려줄 수도 있습니다. (현재 쿠키는 container (#sidebar 위의 div)이고 값이 letter_head 인 쿠키를 생성하는 $.cookie(parent, this.className);으로 설정되어 있습니다. '사이드 바', '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();});