javascript - 从另一个页面打开 Accordion 面板并向下滚动到它

Question

我在默认情况下看起来像这样的页面上有一个 Accordion (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>

在主页上，我需要插入一个指向特定问题的链接。因此，例如，如果我想查看问题一，我会将链接设置为 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>

注意:我无法修改常见问题解答页面的 HTML。它是从一个单独的来源生成的。

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

Answer 1

您可以使用 Accordion 的 active 属性。以下 codePen 描述相同。出于演示目的，我已通过 2 作为事件 Accordion 。您可以通过更改查询参数的值来测试它。

CodePen

代码

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