Javascript 单击其他链接时出现引导折叠问题

Javascript 单击其他链接时出现引导折叠问题,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我试图使一些引导切换链接打开点击链接和折叠再次点击该链接。。打开和关闭都很好。我有3个链接可以打开和折叠。。如果我单击Link1,切换将打开,接下来我单击Link2,该切换也将打开,而不会关闭第一个链接相关切换。。我知道我缺少一些功能。。但是在任何地方都找不到确切的答案。。这里我给出了源代码 <div class="bd-example" data-example-id=""> <p> <button class="btn btn-primary" ty

我试图使一些引导切换链接打开点击链接和折叠再次点击该链接。。打开和关闭都很好。我有3个链接可以打开和折叠。。如果我单击Link1,切换将打开,接下来我单击Link2,该切换也将打开,而不会关闭第一个链接相关切换。。我知道我缺少一些功能。。但是在任何地方都找不到确切的答案。。这里我给出了源代码

<div class="bd-example" data-example-id="">
  <p>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
      Button 1
    </button>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
      Button 2
    </button>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample">
      Button 3
    </button>
  </p>
<div class="collapse" id="collapseExample">
  <div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>
<div class="collapse" id="collapseExample2">
  <div class="card card-block">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident 2.
  </div>
</div>
<div class="collapse" id="collapseExample3">
  <div class="card card-block">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident 3.
  </div>
</div>
</div>


按钮1
按钮2
按钮3

动物保护协会的陈词滥调,埃尼姆·埃乌斯莫德的高寿命accusamus terry richardson广告鱿鱼。Nihil anim keffiyeh helvetica,工艺啤酒工人wes anderson cred nesciunt sapiente ea proident。 动物保护协会的陈词滥调,埃尼姆·埃乌斯莫德的高寿命accusamus terry richardson广告鱿鱼。Nihil anim keffiyeh helvetica,工艺啤酒工人wes anderson cred nesciunt sapiente ea proident 2。 动物保护协会的陈词滥调,埃尼姆·埃乌斯莫德的高寿命accusamus terry richardson广告鱿鱼。Nihil anim keffiyeh helvetica,工艺啤酒工人wes anderson cred nesciunt sapiente ea proident 3。


按钮1
按钮2
按钮3

动物保护协会的陈词滥调,埃尼姆·埃乌斯莫德的高寿命accusamus terry richardson广告鱿鱼。Nihil anim keffiyeh helvetica,工艺啤酒工人wes anderson cred nesciunt sapiente ea proident。 动物保护协会的陈词滥调,埃尼姆·埃乌斯莫德的高寿命accusamus terry richardson广告鱿鱼。Nihil anim keffiyeh helvetica,工艺啤酒工人wes anderson cred nesciunt sapiente ea proident 2。 动物保护协会的陈词滥调,埃尼姆·埃乌斯莫德的高寿命accusamus terry richardson广告鱿鱼。Nihil anim keffiyeh helvetica,工艺啤酒工人wes anderson cred nesciunt sapiente ea proident 3。
您可以使用此方法

  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel">
  <div role="tab" id="headingTwo" class="text-center">
    <button class="collapsed btn btn-primary" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
      aria-expanded="true" aria-controls="collapseOne">
      Button 1
    </button>
    <button class="collapsed btn btn-primary" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
      aria-expanded="false" aria-controls="collapseTwo">
      Button 2
    </button>
    <button class="collapsed btn btn-primary" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"
      aria-expanded="false" aria-controls="collapseThree">
      Button 3
    </button>
  </div>
  <div id="collapseOne" class="panel-collapse text-center collapse" role="tabpanel" aria-labelledby="headingOne">
    <div class="panel-body">
      text .....
    </div>
  </div>
  <div id="collapseTwo" class="panel-collapse text-center collapse" role="tabpanel" aria-labelledby="headingTwo">
    <div class="panel-body">
      text .....
    </div>
  </div>
  <div id="collapseThree" class="panel-collapse text-center collapse" role="tabpanel" aria-labelledby="headingThree">
    <div class="panel-body">
      text .....
    </div>
  </div>
</div>

按钮1
按钮2
按钮3
文本。。。。。
文本。。。。。
文本。。。。。

第二个示例向您展示了如何控制多个目标,但不确定您使用的是什么版本的引导?@痛处与我在这里使用的链接代码相同。不完全是您使用id使用了一个按钮对应一个切换,在示例中,第三个按钮使用类来将它们都作为目标。看起来你想要一个手风琴,请查看该页上的第三个示例。@痛处---查看了第三个示例,同样,单击第二个链接后它没有关闭。。。两个链接都在打开。。我想做的是,那些我点击第二链接第一链接必须关闭。。