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