Question

我试图通过点击链接打开一些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>

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

在这里，伙计，你只需要添加数据 - 父属性并使用手风琴功能

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

Bootstrap折叠问题单击其他链接时

2 个答案: