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

时间:2015-11-27 07:53:39

标签: javascript jquery html 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>

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

但由于它是具有该ID的面板主体,除非我先打开面板并重新输入网址,否则它不会滚动到该部分。

我想知道是否有办法让面板打开并向下滚动到该部分。也许使用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代码太长了所以我认为最好截取它的样子截图。

enter image description here

1 个答案:

答案 0 :(得分:0)

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

CodePen

代码

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