基於ID的手風琴中的開放元素 - jQuery

Question

我在我的網站上有一個簡單的jQuery手風琴。

在每個元素中，有<span>元素具有唯一的ID。

所以...如果我點擊/gallery#football它應該打開我的手風琴的第二塊。

這可能嗎？

My Fiddle is here。

的Javascript

(function($) { 
    var allPanels = $('.accordion > dd').hide(); 
    var allLinks = $('a.heading'); 
    $('.accordion > dt > a').click(function() { 
     allPanels.slideUp(); 

     //Remove all 
     allLinks.removeClass('active'); 

     if ($(this).parent().next().is(":visible")) return false; 
     $(this).parent().next().slideDown(); 

     //Add active class 
     $(this).addClass('active'); 

     return false; 
    }); 
    $('.accordion > dt > a').first().trigger('click'); 
})(jQuery); 

HTML

<dl class="accordion"> 
<dt><a href="" class="heading">Tester</a></dt> 
<dd> 
    <span id="tester"></span> 
    <span id="anothertester"></span> 
    <p>bla</p> 
</dd> 

<dt><a href="" class="heading">Sports</a></dt> 
<dd> 
    <span id="football"></span> 
    <span id="basketball"></span> 
    <p>bla</p> 
</dd> 
</dl> 

Answer 1

您使用find()和parent()或closest()功能：

// Get id from url 
var url = window.location.pathname; 
var id = url.substring(url.lastIndexOf('#')); // This will give you #football 

var spanTag = $('.accordion').find(id); //#football span tag 
var parentTag = spanTag.closest('dd'); 

//open the accordion 
... 

最好的辦法是創建這個新的功能：

function setAccordion() { 
    // Get id from url 
    var url = window.location.pathname; 
    var id = url.substring(url.lastIndexOf('#')); // This will give you #football 

    var spanTag = $('.accordion').find(id); //#football span tag 
    var parentTag = spanTag.closest('dd'); 

    //open the accordion 
    ... 
} 

// Call the function 
setAccordion(); 

工作DEMO中的jsfiddle：

您可以測試它也如#tester，打開第一手風琴改變#football ID 。

http://jsfiddle.net/2hmzcgqm/11/