jQuery 아코디언 - URL을 사용하여 상태를 전달하는 방법은 무엇입니까?

Question

JQuery 아코디언 메뉴에서 상태를 유지하려고하는데 가능한 경우 서버 측 처리 또는 불필요한 변수 전달을 피하고 싶습니다. 나는 페이지가로드 될 때 열어 "자동차"메뉴를 가질 수

accordion.accordion('activate', 0); 

를 하드 코딩하여

<ul class="accordion"> 
    <li> 
    <a href="#" class="opener">Autos</a> 
    <div class="slide"> 
     <ul> 
     <li><a href="/cars">Cars</a></li> 
     <li><a href="/motobikes">Motorbikes</a></li> 
     </ul> 
    </div> 
    </li> 

    <li> 
    <a href="#" class="opener">Pets</a> 
    <div class="slide"> 
     <ul> 
     <li><a href="/cats">Cats</a></li> 
     <li><a href="/dogs">Dogs</a></li> 
     </ul> 
    </div> 
    </li> 
</ul> 


<script type="text/javascript"> 
    $(document).ready(function() { 
    var accordion = $('ul.accordion'); 
    var show_link = '/cats'; 
    active = FIND_SECTION_TO_OPEN_BASED_ON_URL; 
    accordion.accordion('activate', active); 
    }); 
</script> 

하지만 동적으로 어떤 메뉴를 찾을 수에 대한되고 싶어 : 여기

내 코드입니다 또는 URL을 기반으로 여는 ul, 나는 JavaScript에 꽤 익숙하다. 내가 붙어있는 곳은 다음과 같다 :

active = FIND_SECTION_TO_OPEN_BASED_ON_URL.to_int; 

누구든지 이것을 구현하는 방법을 알고 있습니까?

는 (나는이에 대한 많은 연구를 한 적이 여기에 작동하는 솔루션을 찾을 수 없어)

Answer 1

당신은 URL에서 열기 메뉴를 얻기 위해에 location.hash 속성을 사용 할 수 있습니다.

URL : http://www.domainname.com/page.html#1

을 그리고 그것을 얻기 위해 JS를 사용하고 스크립트에 전달 :이 같은 해시 태그에 메뉴 번호를 전달할 것입니다 당신이 필요로하는

<script type="text/javascript"> 
    $(document).ready(function() { 
    var accordion = $('ul.accordion'); 
    var show_link = '/cats'; 
    var active = window.locatioh.hash.replace("#", ""); 
    accordion.accordion('activate', active); 
    }); 
</script> 

Answer 2

우선

이

<a href="#autos" class="opener">Autos</a> 
... 
<a href="#pets" class="opener">Pets</a> 

이 그럼 당신은 그 결과가이 떨어져 인덱스를 기반으로 할 수 있습니다 (당신이 독특한 그냥, 정말 문제가되지 않습니다 통과 무엇)과 같이 앵커를 통해 현재 페이지를 전달하는 h

active = $(".opener[href='"+location.hash+"']").parents("li").index(); 

Answer 3

다음은 내 페이지에서 수행 한 작업입니다. 내 URL의 형식은 site.com/#page/accordion/tab입니다. 또한 사용자가 아코디언이나 탭을 클릭 할 때 해시가 변경되도록 만들었습니다. 그렇게하면 URL을 다른 곳으로 이동하면 방금보고 있던 아코디언으로 이동하게됩니다.

해시 변경 이벤트로 인해 문제가 발생했습니다. 해시이므로 사용자가 site.com/#page/accordion-one에서 site.com/#page/accordion-two으로 이동하면 이는 페이지로드가 아닌 hashchange이므로 아래 코드를 함수에 넣고 hashchange 이벤트에 바인딩합니다. 문제는 내가 아래 코드에서 해시를 변경할 때 바인딩을 해제해야하고, 리 바인딩 할 때 해시 변경 이벤트를 잡는 데 문제가 있습니다. 내 질문보기 here.

var hash = window.location.hash; 
hash = hash.replace(/#/, ""); 
hash = hash.split("/"); 

if(typeof hash[1] !== 'undefined'){ 
    //select campus accordion 
    //first disable the animation and the function that changes the hash: 
    $("#accordion").accordion("option", "animated", false); 
    $('.ui-accordion').unbind('accordionchangestart'); 
    $("#accordion").accordion("activate", $("#accordion-"+hash[1])); 
    $("#accordion").accordion("option", "animated", 'slide'); 
    $('.ui-accordion').bind('accordionchangestart', function(event, ui) { 
     var hash = window.location.hash; 
     hash = hash.replace(/#/, ""); 
     hash = hash.split("/"); 

     var name = $(ui.newHeader).attr("name"); 

     var val = hash[0]+"/"+name; 
     sessionStorage.setItem("accordion", val); 
     hashChange(val); 
    }); 
} 
if(typeof hash[2] !== 'undefined'){ 
    //select tab 
    $(".ui-tabs").tabs("select", "#tabs-"+hash[2]); 
} 

Answer 4

새 라이브러리가 수행합니다. Check it out.