如何使用 html、css 和 javascript 創建手風琴。以便一次打開一個，打開頁面時第一個應該默認打開
[英]How to create Accordion using html, css and javascript. So that one open at a time and when open the page first one should opened by default
問題描述
我使用以下代碼創建了一個手風琴 -
HTML：
<button class="accordion">C/C++</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<button class="accordion">JAVA</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
CSS：
.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;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
JavaScript：
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
它像這樣給出 output-
但是我想在默認情況下打開頁面時首先應該打開一個，並且一次只能打開一個。 像這樣 -
最后應該有+號 open it closed and - when it opened.
2 個解決方案
解決方案1
1 已采納 2020-05-16 19:07:52
嘗試運行代碼片段。 您可能需要更改 CSS 樣式。
[name="accordion-group"]{ display: none; }.element-list{ margin-left: 0; padding-left: 0; list-style-type: none; }.accordion-group label{ color: #666; cursor: pointer; }.accordion-group label:hover{ color: #C85A17; }.accordion-toggle:before{ content: "▶ "; }.accordion-toggle::before{ content: "▶ "; } [name="accordion-group"] ~.accordion-h.accordion-toggle{ display: block; } [name="accordion-group"]:checked ~.accordion-h.accordion-toggle{ display: none; }.accordion-dismiss:before{ content: "▼ ";important. }:accordion-dismiss::before{ content; "▼ ".important: } [name="accordion-group"] ~ h4;accordion-dismiss{ display: none. } [name="accordion-group"]:checked ~ h4;accordion-dismiss{ display. block: };accordion-body{ border-bottom: 1px solid #CC6600; height: auto; max-height: 0; overflow: hidden, background-color, hsla(0, 0%. 100%; :25); box-shadow: 0 2px 2px #CC6600 inset. -webkit-transition; max-height:2s ease 0s. transition; max-height.25s ease 0s: }.accordion-group li:last-child;accordion-body{ border-bottom-width: 1. } [name="accordion-group"]:checked ~;accordion-body{ max-height: 660px. transition-duration; .75s: }.accordion-inner{ padding; 0.631100639515315em 2%; }
<div> <input checked="checked" id="collapse-all" name="accordion-group" type="radio" /> <ul class="accordion-group element-list"> <li> <input id="collapse-1" name="accordion-group" type="radio" checked/> <h4 class="accordion-h"> <label class="accordion-dismiss" for="collapse-all">C++</label> <label class="accordion-toggle" for="collapse-1">C++</label> </h4> <div class="accordion-body"> <div class="accordion-inner"> <span>Content</span></p> </div> </div> </li> <li> <input id="collapse-2" name="accordion-group" type="radio" /> <h4 class="accordion-h"> <label class="accordion-dismiss" for="collapse-all">JAVA</label> <label class="accordion-toggle" for="collapse-2">JAVA</label> </h4> <div class="accordion-body"> <div class="accordion-inner"> Content </div> </div> </li> </ul> </div>
解決方案2
1 2020-05-16 19:19:28
手風琴標題中的+和-圖標可以使用CSS 內容屬性添加。
可以通過 Javascript 改變'高度'屬性來控制手風琴面板的膨脹和收縮。
以下是顯示圖標和控制手風琴擴展的工作代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Accordion - demo</title>
<style>
.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;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<button class="accordion">C / C++</button>
<div class="panel">
<p>C programming</p>
<br>
<p>C++ programming</p>
</div>
<button class="accordion">Java</button>
<div class="panel">
<p>Java programming</p>
</div>
<button class="accordion">Javascript</button>
<div class="panel">
<p>Javascript programming</p>
</div>
<script>
var accordions = document.getElementsByClassName("accordion");
for (var i = 0; i < accordions.length; i++) {
accordions[i].addEventListener(
"click",
function() {
this.classList.toggle("active")
var panel = this.nextElementSibling
if ( panel.style.maxHeight ) {
panel.style.maxHeight = null
} else {
panel.style.maxHeight = (panel.scrollHeight + "px")
}
}
)
}
</script>
</body>
</html>
Output：
更多信息：
第一個手風琴默認打開 JavaScript 或 CSS
[英]First accordion to be made open by default either by JavaScript or CSS
引導手風琴 Javascript 在另一張卡關閉時打開一張卡
[英]Bootstrap accordion Javascript to open one card when the other closes
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.