2017-01-05 60 views
0

我有一個可摺疊的列表,我希望它一次只能打開一個列表。 (有很多額外的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我不想在列表中添加,因爲那時我會圍繞我不想亂點)

+0

寫東西collapseAll每當打開一個列表之前單擊列表。添加一些東西來檢查是否點擊了同一個列表(如果是這樣,不要做任何事情) – softwarenewbie7331

+0

@ softwarenewbie7331我該怎麼做? –

回答

1

我已經修改了你的代碼一點點,增加了一個名爲closeAccordions功能。

檢查accordion已經打開。
如果不是,首先關閉其餘部分,因爲我們現在打開它。
如果是,只需切換當前的。

var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) {  
 
    acc[i].onclick = function(){ 
 
     if(!this.classList.contains("active")) { 
 
      closeAccordions(); 
 
     } 
 
     this.classList.toggle("active"); 
 
     this.nextElementSibling.classList.toggle("show"); 
 
    } 
 
} 
 

 
function closeAccordions() { 
 
    for (i = 0; i < acc.length; i++) { 
 
     acc[i].classList.remove("active"); 
 
     acc[i].nextElementSibling.classList.remove("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>

+0

謝謝!我會將它標記爲我的答案! –

+0

不客氣:) – CreasolDev