html - Twitter Bootstrap 3 - 在另一个 Accordion 中单击链接时自动展开 Accordion

Question

我的页面上有各种 Accordion 。其中一些 Accordion 引用了页面上另一个 Accordion 中的内容，我的问题是如何使第一个 Accordion 展开另一个 Accordion 。

我似乎无法让它工作。

我已将链接设置为 <a href="#SubTitle2">Test</a>

在第一个 <p>在<div class="panel-body">下作为<p id="SubTitle2">Content</p>但这根本没有任何作用。

我是把它放在了错误的地方还是我完全错了？

下面是我的完整代码

    <div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a class="accordion-toggle collapsed" data-parent="#accordion" href="#collapseOne" data-toggle="collapse">Heading 1</a>
            </h3>
        </div>
        <div class="panel-collapse collapse" id="collapseOne">
            <div class="panel-body">
                <p><a href="#SubTitle2">Test</a></p>
            </div>
        </div>
    </div>
</div>
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a class="accordion-toggle collapsed" data-parent="#accordion" href="#collapseTwo" data-toggle="collapse">Heading 2</a>
            </h3>
        </div>
        <div class="panel-collapse collapse" id="collapseTwo">
            <div class="panel-body">
                <p id="SubTitle2">Content</p>
            </div>
        </div>
    </div>
</div>

Answer 1

如果您倾向于为此使用 jQuery，您可以执行以下操作:

$('#SubTitle2').click(function(){
  $('#collapseTwo').collapse('show');
});

... anchor 设置如下:

<a href="#" id="SubTitle2" data-target="#collapseTwo">Test</a>

您可以在这里进行测试:http://www.bootply.com/jQMOup05vG