0
私は以下の折りたたみ可能なリストを持っており、一度に1つのリストしか開くことができないようにしたい。私は財団ボルト締めをクリックした場合例えば1つの折りたたみ可能なリストのみを開く
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>は（余分なCSSの多くはそこにあります）、その後、ウォールブレースをクリックして、財団ボルト締めが閉じます。私はこれを検索するのに多くの時間を費やしましたが、私が見つけた他のものはリストがないので動かないのです。これをどうすれば解決できますか？
私はあなたのコードを少し変更してcloseAccordionsと呼ばれる機能を追加した
リストは、1つのリストを開く前にクリックされたときにcollapseAllする書き込み何か。同じリストがクリックされたかどうかを確認するために何かを追加してください（何もしない場合） – softwarenewbie7331
@ softwarenewbie7331どうすればいいですか？ –