Question

我的网站上有一个简单的 jQuery Accordion 。

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

所以......如果我点击/gallery#football，它应该打开手风琴中的第二个区块。

这可能吗？

的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();

在jsfiddle工作DEMO：

你也可以测试它来改变#football id，例如#tester，这会打开第一支手风琴。

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

在Accordion中打开基于ID的元素 - jQuery

1 个答案: