2014-12-02 32 views
0

我在我的网站上有一个简单的jQuery手风琴基于ID的手风琴中的开放元素 - 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> 

回答

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/

+0

谢谢你的回答。你可以看看我的小提琴http://jsfiddle.net/2hmzcgqm/10/并解释我应该在哪里做这个改变?非常感谢:-) – michaelmcgurk 2014-12-02 07:46:01

+0

感谢您的更新。 – michaelmcgurk 2014-12-02 07:54:16

+1

它在你身边工作吗? – Mivaweb 2014-12-02 08:39:56