我正在为我的以下代码使用 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
最佳答案
你想要的行为叫做“ 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>
关于javascript - Bootstrap 自动折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42593870/