javascript - Bootstrap 自动折叠

Question

我正在为我的以下代码使用 bootstrap collapse。

.downloadmenu {
  width:500px;
  background-color:#7FFFD4;
  margin:0 auto;
  text-align:center;
padding:60px;
  height: auto;

}

.clear {
  clear:both;
}
span {
  background-color:red;
  padding:15px;
  border-radius:10px;
  float:right;
  margin:10px;
}

span:hover {
  cursor: pointer;
  background-color:yellow;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="downloadmenu">

<span data-toggle="collapse" data-target="#FireFoxCol">FireFox</span>
<span data-toggle="collapse" data-target="#ChromeCol">Chrome</span>
<span  data-toggle="collapse" data-target="#OperaCol">Opera</span>
<span data-toggle="collapse" data-target="#SafariCol">Safari</span>

<div class="clear"></div>

<div class="well well-sm collapse" id="FireFoxCol">
<b>Downloding FireFox...</b><br/>
<a href="...">-Download For Windows</a><br/>
<a href="...">-Download For Linux</a>
</div>

<div class="well well-sm collapse" id="ChromeCol">
<b>Downloding Chrome...</b><br/>
<a href="...">-Download For Android</a><br/>
<a href="...">-Download For BlackBerry</a>
</div>

<div class="well well-sm collapse" id="OperaCol">
<b>Downloding Opera...</b><br/>
<a href="...">-Download For Mac</a><br/>
<a href="...">-Download For IOS</a>
</div>

<div class="well well-sm collapse" id="SafariCol">
<b>Downloding Safari...</b><br/>
<a href="...">-Download For Windows Phone</a><br/>
<a href="...">-Download For Java</a>
</div>

</div>

当您点击 FireFox 时，它会显示一个 div。

当你点击时，例如在 Safari 上，另一个 div 会出现在它下面。

我想要这样，当一个 div 向下折叠(如 FireFox)并且你点击另一个(如 Safari)时，当前 FireFox 的 div 向上折叠，然后 Safari 的 div 向下折叠!这只是一个例子。

我该怎么做？

你也可以检查这个:https://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

Answer 1

你想要的行为叫做“ Accordion ”，它是built in to Bootstrap .要使 data-toggle="collapse" 一次只打开 1 个可折叠元素，您还需要做 2 件事。每个可折叠元素共享相同的父项，在本例中为 data-parent=".downloadmenu"。另一件事是父级的直接子级必须是 .panel 类...

<div class="downloadmenu">
    <div class="panel">
        <span data-toggle="collapse" data-parent=".downloadmenu" data-target="#FireFoxCol">FireFox</span>
        <span data-toggle="collapse" data-parent=".downloadmenu" data-target="#ChromeCol">Chrome</span>
        <span data-toggle="collapse" data-parent=".downloadmenu" data-target="#OperaCol">Opera</span>
        <span data-toggle="collapse" data-parent=".downloadmenu" data-target="#SafariCol">Safari</span>

        <div class="clearfix"></div>

        <div class="well well-sm collapse" id="FireFoxCol">
            <b>Downloding FireFox...</b>

        </div>

        <div class="well well-sm collapse" id="ChromeCol">
            <b>Downloding Chrome...</b>

        </div>

        <div class="well well-sm collapse" id="OperaCol">
            <b>Downloding Opera...</b>

        </div>

        <div class="well well-sm collapse" id="SafariCol">
            <b>Downloding Safari...</b>

        </div>
    </div>
</div>

Demo on Codeply