2014-02-06 4 views
0

저는 며칠 동안이 작업에 어려움을 겪었습니다. 끝이없는 답변을 철저히 수색했으며 아직 아무것도 찾지 못했습니다. http://www.adipalaz.com/experiments/jquery/nested_accordion.html 을 그리고 프로젝트 자체가 여기에 있습니다 : : 내가 사용하고 스크립트는 여기에서 발견된다 http://primefooddistributor.com/about.htmjQuery Accodion- 사이트 전반에 걸친 페이지로드시 패널 열기

가 기본적으로 내가 무엇을 달성하기 위해 노력하고있어이 경우 측면 탐색 특정 페이지로 링크 (about.htm을하는 것입니다) 페이지로드시 아코디언의 해당 패널을여십시오. 여기에 마크 업입니다 :

 <!-- ********************* Accordion ********************* -->      
       <ul id="acc1" class="accordion hidden" style="list-style-type:none"> 
        <li> 
        <h2 class="header">Our Story</h2> 

        <div class="inner"> 
         <ul style="list-style-type:none"> 
         <li> 
          <h3 class="header" id="test">Stand Alone: PFD is a different kind of company.</h3> 
          <div class="inner"> 
           <p align="justify" class="bodytext"></p> 
          </div> 
         </li> 
         <li> 
          <h3 class="header">Ambassadors:</h3> 
          <div class="inner"> 
           <p align="justify"></p> 
          </div> 
         </li> 
         <li> 
          <h3 class="header">Tradition:</h3> 
          <div class="inner"> 
           <p align="justify">.</p> 
          </div> 
         </li> 
         </ul> 
        </div> 
        </li> 
        <li> 
        <h2 class="header">Family Tree</h2> 
        <div class="inner"> 
         <ul style="list-style-type:none"> 
         <li> 
          <h3 class="header">Corporate Officers</h3> 
          <div class="inner"> 
           <p> 
           </p> 
          </div> 
         </li> 
         <li> 
          <h3 class="header">PFD Team</h3> 
          <div class="inner"> 
           <p> 
           </p> 
          </div> 
         </li> 
         <li> 
          <div class="inner"> 
          </div> 
         </li> 
         </ul> 
        </div> 
        </li> 
        <li> 
        <h2 class="header">Generations In Our Industry</h2> 
        <div class="inner"> 
         <ul style="list-style-type:none"> 
         <li> 
          <h3 class="header">The true definition of tradition ...</h3> 
          <div class="inner"> 
           <p> 

           </p> 
          </div> 
         </li> 
         <li> 
          <div class="inner"> 
          </div> 
         </li> 
         <li> 
          <div class="inner"> 
          </div> 
         </li> 
         </ul> 
        </div> 
        </li> 
        <li> 
        <h2 class="header">My Story</h2> 
        <div class="inner"> 
         <ul style="list-style-type:none"> 
         <li> 
          <h3 class="header">The art of butchery requires two things:</h3> 
          <div class="inner"> 
           <p> 

           </p> 
          </div> 
         </li> 
         <li> 
          <div class="inner"> 
          </div> 
         </li> 
         <li> 
          <div class="inner"> 
          </div> 
         </li> 
         </ul> 
        </div> 
        </li> 
       </ul> <!-- end accordion --> 

가 그리고 여기에 jQuery를 호출입니다 : 지금 탐색 링크에서 전달 된 URL 해시보고 노력하고

$(document).ready("html").addClass("js"); 
$.fn.accordion.defaults.container = false; 
$(document).ready(function() { 

    $("#acc1").accordion({ 
     el: ".h", 
     head: "h2, h3", 
     next: "div" 
    }); 
    $("html").removeClass("js"); 
}); 

, 변수 및 사용과 같은 해시를 설정 변수를 사용하여 ID로 요소를 찾고 요소에 클래스를 추가하십시오. 여기까지 내가 지금까지 가지고있는 것이지만 그것은 나를 위해 작동하지 않습니다 :

<script type="text/javascript"> 

if(window.location.hash) { 
     var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character 
     $(document).ready.getElementById(hash).addClass("open"); 
     // hash found 
    } else { 
     // No hash found 
    } 
</script> 

어떤 도움을 주시면 감사하겠습니다! 감사!

답변

0

이 내가 이전에 작업 한 뭔가 :

http://jsfiddle.net/volterony/z333M/

나는 당신이이 블록을 인용 알고,하지만 난 내 예를 들어 당신을 위해 일을 할 것 같아요?

$(document).ready("html").addClass("js"); 
$.fn.accordion.defaults.container = false; 
$(document).ready(function() { 

$("#acc1").accordion({ 
    el: ".h", 
    head: "h2, h3", 
    next: "div" 
}); 
$("html").removeClass("js"); 
}); 

바라건대 그 유용 할 것입니다.

Volterony

+0

나는 여기 비슷한 것을 발견했습니다 http://jordanrodriguez.com/jquery-nested-accordion-menu – Volterony

+0

내가 지금으로 보면 곧 당신을 얻을 것이다, 대단히 감사합니다 . –

+0

링크를 다시 주셔서 감사합니다. 아코디언 기능이 현재 사이트에서 완전히 작동하고 있습니다. 끊어져있는 외부 페이지에서 특정 아코디언 패널에 연결하는 문제입니다. 어떻게 할 것인지 생각 중입니다. 페이지를로드 할 때 url의 해시를 확인하고 페이지로드시 해당 패널을 여는 ID를 할당하려면 ID를 할당하십시오. 그러나 정확히 어떻게 수행 할 것인지 확실하지 않습니다. –