从另一个页面打开手风琴面板并向下滚动到它

Question

我在页面上有一个手风琴，默认情况下看起来像这样 (www.sitename.com/faq)

<div id="accordion" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle collapsed" href="#question-one" data-parent="#accordion" data-toggle="collapse" aria-expanded="false">What is blah?</a>
            </h4>
        </div>
        <div id="question-one" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
            <div class="panel-body">
                Lorem ipsum
            </div>
        </div>
    </div>
    <!-- more questions below -->
</div>

在主页上，我需要插入一个指向某个问题的 link。因此，如果我想看问题一，我会将 link 设置为 href='www.sitename.com/faq#question-one'

但由于它是具有该 ID 的面板正文，它不会滚动到该部分，除非我先打开面板并重新输入 url。

我想知道是否有办法打开面板并向下滚动到该部分。也许使用 Javascript 或 jQuery？（我不熟悉。）这是打开面板时的样子，如果有帮助：

<div id="accordion" class="panel-group">
    <div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle" href="#question-one" data-parent="#accordion" data-toggle="collapse" aria-expanded="true">What is blah?</a>
        </h4>
    </div>
    <div id="question-one" class="panel-collapse collapse in" aria-expanded="true" style="">
        <div class="panel-body">
            Lorem ipsum
        </div>
        </div>
    </div>
    <!-- more questions below -->
</div>

注意：我无法修改FAQ页面的HTML。它是从单独的来源生成的。

编辑：css 代码太长，所以我认为最好截取它的外观。

Answer 1

您可以使用手风琴active属性。以下 codePen 描述相同。出于演示目的，我已将 2 作为活动手风琴传递。您可以通过更改查询参数的值来测试它。

CodePen

代码

$("#content").accordion({
    collapsible: true,
    autoHeight: false,
    active:parseInt(activeAccordion) // This will decide which accordion to open.
});

从另一个页面打开手风琴面板并向下滚动到它

Open accordion panel from another page and scroll down to it

html

javascript

jquery

accordion

代码