引导程序自动崩溃

我对以下代码使用引导程序崩溃。引导程序自动崩溃

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

当你点击火狐，它显示了一个div。

而当您单击Safari实例时，另一个div会在它下面出现。我想要的是，当一个div崩溃（如FireFox），你点击另一个（如Safari），当前的FireFox的div崩溃了，然后Safari的div崩溃了！这只是一个例子。

我该怎么办？

您还可以检查此：https://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

来源

2017-03-04 Amir Ebrahimi

你想被称为“手风琴”的行为，这是built in to Bootstrap。您还需要另外做两件事才能使data-toggle="collapse"每次只打开1个可折叠项目。每个可折叠项目共享相同的父项，在本例中为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

来源

2017-03-04 10:27:55 ZimSystem

引导程序自动崩溃

回答

相关问题