Akkordeon funktioniert nur als Knopf innerhalb der Containerklasse, aber wie erwartet draußen erwartet
Posted: 11 Jul 2025, 18:06
Ich habe ein Akkordeon aus dem W3 -School -Beispiel erstellt. Es funktioniert wie erwartet, wenn ich es getrennt halte. Aber wenn ich es mit anderen Eingängen platziere, funktioniert es nur als Taste. Der Inhalt des Akkordeons wird gerade geblitzt, wenn ich auf die Akkordeon -Schaltfläche klicke.
Code: Select all
Bootstrap Example
.advance-search {
background: #fff;
padding: 40px 15px 25px 15px;
border-radius: 3px;
margin-bottom: -50px;
box-shadow: -1px 3px 6px rgba(0, 0, 0, 0.12);
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.align-content-center {
-ms-flex-line-pack: center !important;
align-content: center !important;
}
@media (min-width: 992px) {
.col-lg-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}
.form-row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -5px;
margin-left: -5px;
}
.form-row > .col, .form-row > [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.form-group {
margin-bottom: 1rem;
}
.form-control {
border-radius: 2px;
height: 50px;
background-color: transparent;
color: #666;
box-shadow: none;
font-size: 15px;
}
.btn {
font-size: 15px;
letter-spacing: 1px;
display: inline-block;
padding: 15px 30px;
border-radius: 4px;
}
.w-100 {
width: 100% !important;
}
.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;
display: none;
background-color: white;
overflow: hidden;
}
Basic Card
Category
Top rated
Lowest Price
Highest Price
Section 1
Lorem ipsum
Search Now
Section 1
Lorem ipsum
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.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}