我在一个页面上有一个手风琴,默认情况下看起来像这样(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代码太长了所以我认为最好截取它的样子截图。
答案 0 :(得分:0)
您可以使用手风琴的active
属性。以下codePen描述了相同的内容。出于演示目的,我已将2
作为活动手风琴传递。您可以通过更改查询参数的值来测试它。
$("#content").accordion({
collapsible: true,
autoHeight: false,
active:parseInt(activeAccordion) // This will decide which accordion to open.
});