Twitter Bootstrap 3 - 在另一个手风琴中点击链接时自动展开手风琴 [英] Twitter Bootstrap 3 - Auto Expand An Accordion When A Link Clicked In Another Accordion

问题描述

我有各种手风琴的页面。其中一些手风琴在网页上的另一部手风琴中引用了内容，我的问题是如何制作手风琴，以便在第一部手风琴中扩展其他手风琴。

我不能

我已将连结设定为< a href =＃SubTitle2>测试< / a> ;





在<$ c $下的第一个< p> < code>< p id =SubTitle2>内容< / p> < div class =panel-body> 但是这根本就什么也没做。

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

以下是我的完整代码

 < div class =panel-groupid =accordion> 
< div class =panel panel-default> 
< div class =panel-heading> 
< h3 class =panel-title> 
< a class =accordion-toggle collapseddata-parent =＃accordionhref =＃collapseOnedata-toggle =collapse> Heading 1< / a> 
< / h3> 
< / div> 
< div class =panel-collapse collapseid =collapseOne> 
< div class =panel-body> 
< p>< a href =＃SubTitle2>测试< / a>< / p> 
< / div> 
< / div> 
< / div> 
< / div> 
< div class =panel-groupid =accordion> 
< div class =panel panel-default> 
< div class =panel-heading> 
< h3 class =panel-title> 
< a class =accordion-toggle collapseddata-parent =＃accordionhref =＃collapseTwodata-toggle =collapse> Heading 2< / a> 
< / h3> 
< / div> 
< div class =panel-collapse collapseid =collapseTwo> 
< div class =panel-body> 
< p id =SubTitle2>内容< / p> 
< / div> 
< / div> 
< / div> 
< / div> 
  

解决方案

通过混合Nasir的答案来管理它Mahmood和webeno。

基本上，我混合并匹配了两种解决方案，它的工作原理。我的代码现在是：

 < p>< a class =collapsedhref =＃SubTitle2data-toggle =collapsedata-target =＃collapseTwo>测试< / a>< / p> 
  

由于您无法将回复标记为答案，因此我会为它们添加评论

I have page with various accordions on. Some of these accordions reference content in another accordion on the page, my question is how do I make it so that the in the first accordion expands the other accordion.

I cant seem to get it to work.

I have set the link up as <a href="#SubTitle2">Test</a>

And on the first <p> under the <div class="panel-body"> as <p id="SubTitle2">Content</p> but this does nothing at all.

Am I putting it in the wrong place or am I going about it completely wrong?

Below is my complete code

    <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>

解决方案

Managed to get it working by mixing the answers from Nasir Mahmood and webeno.

Basically I mixed and matched both solutions and it works. My code is now:

<p><a class="collapsed" href="#SubTitle2" data-toggle="collapse" data-target="#collapseTwo">Test</a></p>

As you are not able to mark responses as answer I will add a comment on them both

这篇关于Twitter Bootstrap 3 - 在另一个手风琴中点击链接时自动展开手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！