Accordion jQuery - 从外部链接打开部分

Question

我有一个手风琴菜单，我无法弄清楚如何链接。菜单本身工作正常。

当我点击下面的链接，我的第一个手风琴菜单应该开放

<a href="case_studies.html#case1">Case study 1</a> 

的JavaScript手风琴

<script type="text/javascript"> 
$(document).ready(function(){ 
$("a#show-panel").click(function(){ 
    $("#lightbox, #lightbox-panel").fadeIn(300); 
}) 
$("a#close-panel").click(function(){ 
    $("#lightbox, #lightbox-panel").fadeOut(300); 
}) 
}) 
</script> 

<script type="text/javascript"> 
    $(function(){ 
     $("#accordion-header").accordion({ navigation: true }); 
    }); 
</script> 

的accordion.js文件

$(document).ready(function() 
{ 
    //Add Inactive Class To All Accordion Headers 
    $('.accordion-header').toggleClass('inactive-header'); 

    //Set The Accordion Content Width 
    var contentwidth = $('.accordion-header').width(); 
    $('.accordion-content').css({'width' : contentwidth }); 

/* //Open The First Accordion Section When Page Loads 
    $('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header'); 
    $('.accordion-content').first().slideDown().toggleClass('open-content'); */ 

    // The Accordion Effect 
    $('.accordion-header').click(function() { 
     if($(this).is('.inactive-header')) { 
      $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content'); 
      $(this).toggleClass('active-header').toggleClass('inactive-header'); 
      $(this).next().slideToggle().toggleClass('open-content'); 
     } 

     else { 
      $(this).toggleClass('active-header').toggleClass('inactive-header'); 
      $(this).next().slideToggle().toggleClass('open-content'); 
     } 
    }); 

    return false; 
}); 

身体手风琴的代码是

<div id="accordion-container"> 
    <p class="accordion-header" style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;"><span style="padding-left:10px; color:#009edb; padding-top:10px; line-height:25px;"><a href="#case1">Case study 1</a></span></p> 

     <div class="accordion-content"> 
     <div class="textInner"> 
       TEST TEXT THAT FALLS UNDER THE MENU 
       </div> 
     </div> 

     <p class="accordion-header" style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;"><span style="padding-left:10px; color:#009edb; padding-top:10px; line-height:25px;"><a href="#case2">Case study 2</a></span></p> 

     <div class="accordion-content"> 
     <div class="textInner"> 
       TEST TEXT THAT FALLS UNDER THE MENU 
       </div> 
     </div> 
</div> 

任何帮助表示赞赏。我在这里没有想法。

欢呼和预先感谢， 摹

Answer 1

$(function(){ 
    $("#accordion-header").accordion({ navigation: true }); 
    $("[href='#case1']").parent('.accordion-header').click(); 
}); 

（我让你自己找出如何从URL中的散列值）

编辑：看你的代码，它也可能是更适合在手风琴插件中使用散列更改处理程序事件（而不是单击事件）

Answer 2

小提琴here！ 这个工作，因为我从你的问题了解。

<li class="dropdown"> 
    <a id="drop4" role="button" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
    <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4"> 
      <li role="presentation"><a class= "opener" data-panel="0" role="menuitem" tabindex="-1" href="#">Bank</a></li> 
      <li role="presentation"><a role="menuitem"class= "opener" data-panel="1" tabindex="-1" href="#">Cash</a></li> 
      <li role="presentation"><a role="menuitem" class= "opener" data-panel="2" tabindex="-1" href="#">Property</a></li>   
    </ul> 
</li> 
    <div id="Accordion"> 
    <h3>Section 1</h3> 
    <div> 
     <p></p> 
    </div> 
<h3>Section 2</h3> 
    <div> 
     <p></p> 
    </div> 
<h3>Section 3</h3> 
    <div> 
     <p></p> 
    </div> 
<h3>Section 4</h3> 
    <div> 
     <p>One</p> 
     <p>Two</p> 
    </div> 

及其JavaScript是：

var $accordion = $("#Accordion"); 

$accordion.accordion(); 

$(".opener").on("click", function() { 
    var $this = $(this), 
     toOpen = $this.data("panel"); 

    $accordion.accordion("option", "active", toOpen); 

    return false; 
});