用Bootstrap行走以完成我的演出/隱藏手風琴

Question

好的，我今天開始使用Bootstrap ，並獲得了一些幫助，以開始使一個撥動開關工作，但是我需要其中4個工作正常。 您所看到的問題是，如果僅在第一個窗口中顯示信息，則運行代碼，我需要幫助的第二件事是使代碼工作一次只能顯示一個隱藏的文本，而我需要幫助的第三件事是使第一個隱藏的文本在頁面加載時可見。 *這不是重復的，我最后一個解決方案工作得很好，但反應不是很靈敏，而且很遲鈍，因此決定嘗試使用Bootstrap，它看起來很有希望。

 #leftpanel h1 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; border-top: 1px solid #b0a887; font-style: normal;} #leftpanel h2 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; font-style: normal;} #leftpanel a {margin-left: 230px;} #demo { color: #333; font-size: 14px;} .collapse {} .testver { } .testver hr { } .fa-angle-up { display: none; } .testver i { } .testver .fa { ; } .arrow[aria-expanded="true"] .fa-angle-up { display: inline-block; } .arrow[aria-expanded="true"] .fa-angle-down { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div id="leftpanel"> <div class="testver"> <h1>First title</h1> <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo"> <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> </a> <div id="demo" class="collapse"> First text </div> <hr> </div> <div class="testver"> <h2>Second title</h2> <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo"> <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> </a> <div id="demo" class="collapse"> Second text </div> <hr> </div> <div class="testver"> <h2>Third title</h2> <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo"> <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> </a> <div id="demo" class="collapse"> Third text </div> <hr> </div> <div class="testver"> <h2>Last title</h2> <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo"> <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> </a> <div id="demo" class="collapse"> Last Text </div> <hr> </div> </div> 

Answer 1

這些ID必須是唯一的：因此僅將#demo更改為＃demo1，＃demo2，＃demo3和＃demo4。

單擊一個div之后，有必要隱藏所有剩余的div：

var currTarget = $(this).closest('a').data('target').substr(1);
$('#leftpanel').find('[id^="demo"]').not(currTarget).collapse('hide');

為了打開第一個div，有必要在屬性中加上折疊和aria-expandded，如下所示：

<div id="demo1" class="collapse in" aria-expanded="true">

片段：

 $('.testver a i').on('click', function(e) { var currTarget = $(this).closest('a').data('target').substr(1); $('#leftpanel').find('[id^="demo"]').not(currTarget).collapse('hide'); }); 

 #leftpanel h1 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; border-top: 1px solid #b0a887; font-style: normal;} #leftpanel h2 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; font-style: normal;} #leftpanel a {margin-left: 230px;} #demo { color: #333; font-size: 14px;} .collapse {} .testver { } .testver hr { } .fa-angle-up { display: none; } .testver i { } .testver .fa { ; } .arrow[aria-expanded="true"] .fa-angle-up { display: inline-block; } .arrow[aria-expanded="true"] .fa-angle-down { display: none; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div id="leftpanel"> <div class="testver"> <h1>First title</h1> <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo1" aria-expanded="true"> <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> </a> <div id="demo1" class="collapse in" aria-expanded="true"> First text </div> <hr> </div> <div class="testver"> <h2>Second title</h2> <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo2"> <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> </a> <div id="demo2" class="collapse"> Second text </div> <hr> </div> <div class="testver"> <h2>Third title</h2> <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo3"> <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> </a> <div id="demo3" class="collapse"> Third text </div> <hr> </div> <div class="testver"> <h2>Last title</h2> <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo4"> <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> </a> <div id="demo4" class="collapse"> Last Text </div> <hr> </div> </div>