深 link 并打开手风琴项目

Question

我正在尝试在下面的代码中添加深度 linking，这样我就可以 link 直接到手风琴项目，并在我输入正确的 URL 时打开它地址栏：

这是我的工作手风琴没有深度 linking:

$('.responsive-accordion').each(function() {

        // Set Expand/Collapse Icons
            $('.responsive-accordion-minus', this).hide();

        // Hide panels
            $('.responsive-accordion-panel', this).hide();

        // Bind the click event handler
            $('.responsive-accordion-head', this).click(function(e) {
                // Get elements
                    var thisAccordion = $(this).parent().parent(),
                        thisHead = $(this),
                        thisPlus = thisHead.find('.responsive-accordion-plus'),
                        thisMinus = thisHead.find('.responsive-accordion-minus'),
                        thisPanel = thisHead.siblings('.responsive-accordion-panel');

                // Reset all plus/mins symbols on all headers
                    thisAccordion.find('.responsive-accordion-plus').show();
                    thisAccordion.find('.responsive-accordion-minus').hide();

                // Reset all head/panels active statuses except for current
                    thisAccordion.find('.responsive-accordion-head').not(this).removeClass('active');
                    thisAccordion.find('.responsive-accordion-panel').not(this).removeClass('active').slideUp();

                // Toggle current head/panel active statuses
                    if (thisHead.hasClass('active')) {
                        thisHead.removeClass('active');
                        thisPlus.show();
                        thisMinus.hide();
                        thisPanel.removeClass('active').slideUp();
                    } else {
                        thisHead.addClass('active');
                        thisPlus.hide();
                        thisMinus.show();
                        thisPanel.addClass('active').slideDown();
                    }
            });
    });

我一直在尝试整合这段代码以启动深度 linking，但它就是行不通：

var active = 1;
        var hash = document.location.hash;

        if (hash.length > 0) {
            var section = $("#deep-link").find("> li" + hash);
            if (section.length) {
                active = section.index();
            }
            thisPanel.addClass('active').slideDown();
        }

HTML 是一个简单的 UL:

<ul class="responsive-accordion responsive-accordion-default bm-larger" id="deep-link">
    <li id="item-0">
       <div class="responsive-accordion-head">
          Heading Here
       </div>
       <div class="responsive-accordion-panel">
          Content here
       </div>
    </li>
</ul>

Answer 1

我认为您的函数中没有设置 thisPanel 变量。这应该适合你。

var active = 1;
var hash = document.location.hash;

if (hash.length > 0) {
    var section = $("#deep-link").children("li" + hash);
    var thisPanel = section.children(".responsive-accordion-panel");
    if (section.length) {
        active = section.index();
    }
    thisPanel.addClass('active').slideDown();
}

深 link 并打开手风琴项目

Deep link and open an accordion item

hash

jquery

accordion

deep-linking