在网页设计中，有时我们需要根据用户的交互来动态显示或隐藏内容。比如，一个简洁的页面可能需要用户点击一个按钮来查看更多详细信息。这种交互式功能可以通过HTML和JavaScript轻松实现。下面，我将通过一个简单的示例来展示如何使用HTML和JavaScript来创建一个可展开和收起的文本框。
HTML结构
首先，我们需要定义文本框的基本结构。在这个例子中，我们将使用一个按钮来触发文本框的展开和收起。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本框展开示例</title>
<style>
.content {
display: none;
margin-top: 10px;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div>
<button onclick="toggleContent()">展开/收起</button>
<div class="content">
这是一个可展开和收起的文本框。点击上面的按钮来切换显示状态。
</div>
</div>
</body>
</html>
在这个HTML代码中，我们定义了一个按钮和一个<div>元素。<div>元素的类名为content，并且默认是隐藏的（通过CSS设置display: none）。
CSS样式
在<style>标签中，我们定义了.content类的样式。display: none;确保了文本框在页面加载时是不可见的。
JavaScript逻辑
接下来，我们需要编写JavaScript代码来处理按钮的点击事件，并切换文本框的显示状态。
function toggleContent() {
var content = document.querySelector('.content');
if (content.style.display === 'none') {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
}
这段代码定义了一个名为toggleContent的函数。当用户点击按钮时，这个函数会被调用。函数首先通过document.querySelector('.content')获取到.content类的元素。然后，它检查这个元素的style.display属性。如果display属性是none，意味着文本框是隐藏的，那么函数将其设置为block，使其显示出来。相反，如果文本框已经显示，函数将其设置为none，使其隐藏。
总结
通过上述步骤，我们就完成了一个简单的可展开和收起的文本框的创建。这种方法不仅可以应用于文本框，还可以应用于其他任何需要根据用户交互动态显示或隐藏的元素。希望这个示例能够帮助你更好地理解如何使用HTML和JavaScript来实现这样的功能。
-- 展开阅读全文 --
