我有一個可摺疊的列表,我希望它一次只能打開一個列表。 (有很多額外的CSS在那裏)一次只能打開一個可收起列表
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 500px;
}
body {
\t font-family: sans-serif;
\t font-weight: normal;
\t margin: 10px;
\t color: #999;
}
form {
\t margin: 40px 0;
}
div {
\t clear: both;
\t margin: 0 50px;
}
label {
border-radius: 3px;
border: 1px solid #D1D3D4
}
/* hide input */
input.radio:empty {
\t margin-left: -999px;
}
/* style label */
input.radio:empty ~ label {
\t position: relative;
\t float: left;
\t line-height: 2.5em;
\t text-indent: 3.25em;
\t margin-top: 2em;
\t cursor: pointer;
\t -webkit-user-select: none;
\t -moz-user-select: none;
\t -ms-user-select: none;
\t user-select: none;
}
input.radio:empty ~ label:before {
\t position: absolute;
\t display: block;
\t top: 0;
\t bottom: 0;
\t left: 0;
\t content: '';
\t width: 2.5em;
\t background: #D1D3D4;
\t border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
\t content:'\2714';
\t text-indent: .9em;
\t color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
\t color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
\t content:'\2714';
\t text-indent: .9em;
\t color: #9CE2AE;
\t background-color: #4DCB6D;
}
input.radio:checked ~ label {
\t color: #777;
}
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 500px;
}
body {
\t font-family: sans-serif;
\t font-weight: normal;
\t margin: 10px;
\t color: #999;
}
form {
\t margin: 40px 0;
}
div {
\t clear: both;
\t margin: 0 50px;
}
label {
border-radius: 3px;
border: 1px solid #D1D3D4
}
/* hide input */
input.radio:empty {
\t margin-left: -999px;
}
/* style label */
input.radio:empty ~ label {
\t position: relative;
\t float: left;
\t line-height: 2.5em;
\t text-indent: 3.25em;
\t margin-top: 2em;
\t cursor: pointer;
\t -webkit-user-select: none;
\t -moz-user-select: none;
\t -ms-user-select: none;
\t user-select: none;
}
input.radio:empty ~ label:before {
\t position: absolute;
\t display: block;
\t top: 0;
\t bottom: 0;
\t left: 0;
\t content: '';
\t width: 2.5em;
\t background: #D1D3D4;
\t border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
\t content:'\2714';
\t text-indent: .9em;
\t color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
\t color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
\t content:'\2714';
\t text-indent: .9em;
\t color: #9CE2AE;
\t background-color: #4DCB6D;
}
input.radio:checked ~ label {
\t color: #777;
}
<button class="accordion">Foundation Bolting</button>
<div class="panel">
<div>
<input type="radio" name="radio" id="radio1-1" class="radio">
<label for="radio1-1">Foundation Bolts</label>
</div>
<div>
<input type="radio" name="radio" id="radio1-2" class="radio">
<label for="radio1-2">Foundation Plates</label>
</div>
</div>
<button class="accordion">Wall Bracing</button>
<div class="panel">
\t <div>
<input type="radio" name="radio2" id="radio2-1" class="radio">
<label for="radio2-1">Strong Tie Retrofit Connectors</label>
</div>
<div>
<input type="radio" name="radio2" id="radio2-2" class="radio">
<label for="radio2-2">Angled Iron Struts</label>
</div>
</div>
例如,如果我點擊基金會抽薹,然後在牆支護,錨杆支護基金會將關閉。我花了很多時間搜索這些,但是我發現所有其他的搜索結果都不起作用,因爲我沒有列表。我怎樣才能解決這個問題?
(PS我不想在列表中添加,因爲那時我會圍繞我不想亂點)
寫東西collapseAll每當打開一個列表之前單擊列表。添加一些東西來檢查是否點擊了同一個列表(如果是這樣,不要做任何事情) – softwarenewbie7331
@ softwarenewbie7331我該怎麼做? –