要让“MORE”按钮触发表单的展开和收缩，你可以使用HTML、CSS和JavaScript来实现。以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expand/Collapse Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button id="moreButton">MORE</button>
<form id="expandableForm" class="collapsed">
<!-- 表单内容 -->
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<!-- 更多表单字段 -->
</form>
<script src="script.js"></script>
</body>
</html>
#expandableForm {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
#expandableForm.expanded {
max-height: 500px; /* 根据需要调整高度 */
}
document.getElementById('moreButton').addEventListener('click', function() {
var form = document.getElementById('expandableForm');
form.classList.toggle('expanded');
});
HTML:
#moreButton) 和一个表单 (#expandableForm)。collapsed，表示表单是折叠的。CSS:
#expandableForm 的 max-height 初始为 0，并且 overflow 设置为 hidden，这样表单内容会被隐藏。expanded 类时，max-height 设置为一个较大的值（例如 500px），表单内容会展开。transition 属性来实现平滑的展开和收缩效果。JavaScript:
#moreButton 添加了一个点击事件监听器。#expandableForm 的 expanded 类，从而触发表单的展开和收缩。max-height，而不是使用固定的值。通过这种方式，点击“MORE”按钮时，表单会平滑地展开或收缩。