嘗試在網頁上創建可折疊段，到目前為止剛剛嘗試了 W3 學校的示例：https ://www.w3schools.com/howto/howto_js_collapsible.asp 。當我單擊“當前”按鈕時，div 不會展開。
我知道按鈕標簽需要直接位于要折疊的部分旁邊，我有。通過在我的瀏覽器上使用 Inspect 功能，看起來 content.style.display 設定在單擊時未正確設定，因為手動切換它會產生所需的效果。我查看了建議使用 this.parentNode.nextElementSibling 而不是 this.nextElementSibling 的類似問題，但這只是產生了相同的行為。標簽的位置重要嗎？下面是代碼片段——本質上只是來自 W3 網站的代碼。
const coll = document.getElementsByClassName("collapsible");
let i;
for (i = 0; i < coll.length; i ) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
let content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.content {
padding: 0 18px;
overflow: hidden;
background-color: white;
background-color: #f1f1f1;
}
.active, .collapsible:hover {
background-color: #ccc;
}<button type="button" class="collapsible">current</button>
<div class="content">
<p>Lorem ipsum...</p>
</div>uj5u.com熱心網友回復：
片段中有兩件事：我認為這只是因為您復制粘貼片段的方式，但以防萬一，您可以查看 W3 示例來構建您的 HTML
真正的問題
之后，您還需要在 a 中定義樣式head并且它們已損壞您需要洗掉該屬性max-height: 0，否則，無論顯示值如何，高度始終為 0
而且只有
.content {
padding: 0 18px;
overflow: hidden;
background-color: white;
max-height: 0; [Remove this line]
background-color: #f1f1f1;
}
uj5u.com熱心網友回復：
問題出在您的 JavaScript 代碼中。
它應該看起來像這樣：
let coll = document.getElementsByClassName("collapsible");
for (let i = 0; i < coll.length; i ) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
let content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight "px";
}
});
}
您的代碼應如下所示（完整版）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.content {
padding: 0 18px;
overflow: hidden;
background-color: white;
max-height: 0;
background-color: #f1f1f1;
transition: max-height 0.2s ease-out;
}
.active,
.collapsible:hover {
background-color: #ccc;
}
</style>
</head>
<body>
<button type="button" class="collapsible">current</button>
<div class="content">
<p>Lorem ipsum...</p>
</div>
<script>
let coll = document.getElementsByClassName("collapsible");
for (let i = 0; i < coll.length; i ) {
coll[i].addEventListener("click", function () {
this.classList.toggle("active");
let content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight "px";
}
});
}
</script>
</body>
</html>此外，還有一種方法可以通過設定 CSS property 來使用和實作您想要的display，但在這種情況下，您必須洗掉 CSS 內部的屬性overflow（基本上是洗掉它）-> 它位于內部.content，這是它的完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.content {
padding: 0 18px;
background-color: white;
max-height: 0;
background-color: #f1f1f1;
display:none;
transition: max-height 0.2s ease-out;
}
.active,
.collapsible:hover {
background-color: #ccc;
}
</style>
</head>
<body>
<button type="button" class="collapsible">current</button>
<div class="content">
<p>Lorem ipsum...</p>
</div>
<script>
let coll = document.getElementsByClassName("collapsible");
for (let i = 0; i < coll.length; i ) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
let content = document.getElementsByClassName("content")[0];
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>
</html>uj5u.com熱心網友回復：
1-把你的腳本從身體里拿出來。
2-在我這樣做之后，還有另一個問題。開始時的額外點擊。你為什么要使用所有這些腳本？如果它只是一個元素，那么你不需要回圈。讓我知道它是否只有一個，我會用更少更好的腳本更新答案。
無論如何，我通過檢查是否顯示！= none 在您的腳本中修復了它。
3-如果你想要一些平滑的影片，那么你應該使用高度而不是顯示，然后將過渡設定為 1s。
<body>
<style>
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
border: 1px solid;
}
.content {
padding: 0 18px;
display: block;
overflow: hidden;
background-color: white;
background-color: #f1f1f1;
border: 1px solid red;
}
.active, .collapsible:hover {
background-color: #ccc;
}
</style>
<button type="button" class="collapsible">current</button>
<div class="content">
<p>Lorem ipsum...</p>
</div>
</body>
<script>
const coll = document.getElementsByClassName("collapsible");
for (i = 0; i < coll.length; i ) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
let content = this.nextElementSibling;
if (content.style.display != "none") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/525138.html
標籤：htmlcss
上一篇：離開容器的輸入框