0
У меня есть сворачиваемый список ниже, и я хочу его, чтобы можно было открыть только один список за раз. (Там очень много дополнительных CSS там)Только один Collapseable List Open за раз
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>Например, если я нажму на Foundation затворов, а затем нажмите на Уолл растяжек, Фонд Bolting закроются. Я потратил много времени на поиск этого, но все остальные, которые я нахожу, не работают, потому что у меня нет списка. Как я могу это исправить?
(PS Я не хочу, чтобы добавить в список, потому что тогда я буду иметь случайные точки вокруг, что я не хочу)
написать что-то collapseAll всякий раз, когда список щелкнул перед открытием, что один список. добавьте что-нибудь, чтобы проверить, был ли нажат тот же список (если это ничего не делать) – softwarenewbie7331
@ softwarenewbie7331 как я могу это сделать? –