引导崩溃问题单击其他链接时答案

【问题标题】：Bootstrap Collapse Issue While clicking on other link引导崩溃问题单击其他链接时
【发布时间】：2018-07-02 05:42:05
【问题描述】：

我正在尝试通过单击链接来打开一些 Bootstrap Toggle 链接，并通过再次单击该链接来折叠。它可以很好地打开和关闭。我有 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>

【问题讨论】：

getbootstrap.com/docs/4.0/components/collapse 第二个例子告诉你如何控制多个目标，不确定你使用的是什么版本的引导程序？
@sore-spot 我在这里使用的相同链接代码..
您还没有使用 id 将一个按钮用于一个切换，在示例中，第三个按钮使用类来定位它们。看起来您想要一个手风琴，请查看该页面上的第三个示例。
@sore-spot ---检查了第三个例子，同样它没有通过点击第二个链接关闭......两个链接都在打开..我想做的是，我点击在第二个链接上，第一个链接必须关闭..

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="bd-example" data-example-id="" id="accordion">
<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" data-parent="#accordion">
<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" data-parent="#accordion">
<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" data-parent="#accordion">
<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>

兄弟，你只需要添加 data-parent 属性并使用手风琴功能

【讨论】：

【解决方案2】：

你可以用这个方法

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

【讨论】：