深层链接并打开手风琴项目 [英] Deep link and open an accordion item

问题描述

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

这是我没有深层链接的工作手风琴:

$('.responsive-accordion').each(function() {//设置展开/折叠图标$('.responsive-accordion-minus', this).hide();//隐藏面板$('.responsive-accordion-panel', this).hide();//绑定点击事件处理程序$('.responsive-accordion-head', this).click(function(e) {//获取元素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');//重置所有标题上的所有加/分符号thisAccordion.find('.responsive-accordion-plus').show();thisAccordion.find('.responsive-accordion-minus').hide();//重置除当前之外的所有头部/面板活动状态thisAccordion.find('.responsive-accordion-head').not(this).removeClass('active');thisAccordion.find('.responsive-accordion-panel').not(this).removeClass('active').slideUp();//切换当前的头部/面板活动状态如果 (thisHead.hasClass('active')) {thisHead.removeClass('active');thisPlus.show();thisMinus.hide();thisPanel.removeClass('active').slideUp();} 别的 {thisHead.addClass('active');thisPlus.hide();thisMinus.show();thisPanel.addClass('active').slideDown();}});});

我一直在尝试集成这段代码以启动深度链接，但它不起作用:

var active = 1;var hash = document.location.hash;如果 (hash.length > 0) {var section = $("#deep-link").find("> li" + hash);如果(节.长度){活动 = section.index();}thisPanel.addClass('active').slideDown();}

HTML 是一个简单的 UL:

<li id="item-0"><div class="responsive-accordion-head">前往这里

<div class="responsive-accordion-panel">内容在这里

解决方案

我认为您的函数中没有设置 thisPanel 变量.这应该对你有用.

var active = 1;var hash = document.location.hash;如果 (hash.length > 0) {var section = $("#deep-link").children("li" + hash);var thisPanel = section.children(".responsive-accordion-panel");如果(节.长度){活动 = section.index();}thisPanel.addClass('active').slideDown();}

I'm trying to add deep linking to the code below so I can link directly to an accoridon item and open it when I enter the correct URL into the address bar:

Here's my working accordion WITHOUT deep 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();
                    }
            });
    });

I have been trying to integrate this piece of code to initiate deep linking but it just isn't working:

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 is a simple 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>

解决方案

I think there is no setted thisPanel variable in your function. This should work for you.

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

这篇关于深层链接并打开手风琴项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！