如何用html写一个可以折叠的文本框
时间: 2024-05-04 11:21:50 浏览: 13
可以使用HTML和CSS来创建可折叠的文本框,具体实现方式如下:
HTML代码:
```
<div class="collapsible">
<h2>标题</h2>
<div class="content">
<p>这里是文本内容</p>
</div>
</div>
```
CSS代码:
```
.collapsible {
border: 1px solid #ddd;
margin-bottom: 20px;
}
.collapsible h2 {
background-color: #eee;
cursor: pointer;
padding: 10px;
margin: 0;
}
.collapsible .content {
padding: 0 10px;
display: none;
}
.collapsible.active .content {
display: block;
}
```
其中,`.collapsible`类设置整个可折叠文本框的样式,`.collapsible h2`类设置标题的样式,`.collapsible .content`类设置内容的样式,`.collapsible.active .content`类设置展开后内容的样式。
最后,使用JavaScript来实现点击标题展开/折叠内容的效果:
```
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.querySelector(".content");
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
```