Question

我目前在Bootstrap崩溃方面存在一些问题，因为我希望它一次只显示一个div。但是，现在它只是在我点击它们时显示所有三个。我想能够点击一个按钮，如果有任何打开则隐藏其他按钮。我怎么能这样做？

到目前为止，这是我的代码：

 <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group btn-group-lg m-auto mt-5" role="group" aria-label="First group">
              <button type="button" class="btn active btn-secondary" data-toggle="collapse" data-target="#collapseInformation" aria-expanded="false" aria-controls="collapseInformation"><span class="content">Go one</span></button>
              <button type="button" class="btn btn-secondary" data-toggle="collapse" data-target="#collapseCampus" aria-expanded="false" aria-controls="collapseCampus"><span class="content">Go two</span></button>
              <button type="button" class="btn btn-secondary" data-toggle="collapse" href="#collapseNearby" role="button" aria-expanded="false" aria-controls="collapseNearby"><span class="content">Go three</span></button>
            </div>
          </div>




<div id="accordion" role="tablist">
          <div class="collapse-information collapse show w-75 m-auto" role="tab" id="collapseInformation">
              <div class="card card-body">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue laoreet quam, eu convallis tortor condimentum nec. Pellentesque sed felis id ex pellentesque ultrices. Aenean in tempor lorem, eu porta enim. Aliquam erat volutpat. Nulla sit amet congue dolor, id porta urna. Suspendisse vel libero eleifend, accumsan nunc id, vulputate ligula. Nunc eleifend dictum velit, vel euismod augue pretium et.

                  Proin rhoncus odio eleifend finibus mattis. Morbi purus odio, aliquam non augue quis, viverra iaculis velit. Fusce dictum elit vel venenatis posuere. Donec nisl nibh, semper vel lacus et, facilisis tempor velit. Proin ullamcorper, diam ac lobortis venenatis, lorem lectus dapibus nulla, eget dapibus leo ex ut leo. Suspendisse sed nisl sollicitudin, vulputate ipsum a, commodo tortor. In bibendum placerat nibh non congue. Curabitur condimentum dolor turpis, vel pharetra dui egestas a. Integer consequat accumsan rutrum. Morbi et felis quam. Sed suscipit placerat dolor, nec vulputate dolor. Maecenas porta ex ut arcu mattis, sit amet convallis urna scelerisque.</div>
          </div>

          <div class="collapse-campus collapse w-75 m-auto" role="tab" id="collapseCampus">
              <div class="card card-body">
                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-nearby collapse w-75 m-auto" role="tab" id="collapseNearby">
              <div class="card card-body">
                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>

非常感谢帮助。

Answer 1

这是一个简单的问题，只需在你的html中使用 data-parent =“＃accordion”

您可以在此处试用此代码..

或者您尝试使用jsfiddle demo

<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">



 <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group btn-group-lg m-auto mt-5" role="group" aria-label="First group">
              <button type="button" class="btn active btn-secondary" data-toggle="collapse" data-target="#collapseInformation" aria-expanded="false" aria-controls="collapseInformation"><span class="content">Go one</span></button>
              <button type="button" class="btn btn-secondary" data-toggle="collapse" data-target="#collapseCampus" aria-expanded="false" aria-controls="collapseCampus"><span class="content">Go two</span></button>
              <button type="button" class="btn btn-secondary" data-toggle="collapse" href="#collapseNearby" role="button" aria-expanded="false" aria-controls="collapseNearby"><span class="content">Go three</span></button>
            </div>
          </div>




<div id="accordion" role="tablist">
          <div class="collapse-information collapse show w-75 m-auto" role="tab" id="collapseInformation" data-parent="#accordion">
              <div class="card card-body">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue laoreet quam, eu convallis tortor condimentum nec. Pellentesque sed felis id ex pellentesque ultrices. Aenean in tempor lorem, eu porta enim. Aliquam erat volutpat. Nulla sit amet congue dolor, id porta urna. Suspendisse vel libero eleifend, accumsan nunc id, vulputate ligula. Nunc eleifend dictum velit, vel euismod augue pretium et.

                  Proin rhoncus odio eleifend finibus mattis. Morbi purus odio, aliquam non augue quis, viverra iaculis velit. Fusce dictum elit vel venenatis posuere. Donec nisl nibh, semper vel lacus et, facilisis tempor velit. Proin ullamcorper, diam ac lobortis venenatis, lorem lectus dapibus nulla, eget dapibus leo ex ut leo. Suspendisse sed nisl sollicitudin, vulputate ipsum a, commodo tortor. In bibendum placerat nibh non congue. Curabitur condimentum dolor turpis, vel pharetra dui egestas a. Integer consequat accumsan rutrum. Morbi et felis quam. Sed suscipit placerat dolor, nec vulputate dolor. Maecenas porta ex ut arcu mattis, sit amet convallis urna scelerisque.</div>
          </div>

          <div class="collapse-campus collapse w-75 m-auto" role="tab" id="collapseCampus" data-parent="#accordion">
              <div class="card card-body">
                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-nearby collapse w-75 m-auto" role="tab" id="collapseNearby" data-parent="#accordion">
              <div class="card card-body">
                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>

Bootstrap折叠一次显示一个

1 个答案: