引導程序自動崩潰

我對以下代碼使用引導程序崩潰。引導程序自動崩潰

.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

引導程序自動崩潰

回答

相關問題