效果
完整代码
<!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>div的隐藏与显示</title><style>/* 标题样式 */h3 {text-align: center;margin: 2%;}/* 主体内容样式 */.content {display: flex;width: 100%;}/* 每一个小块的样式 */.item {flex: 1;display: flex;justify-content: center;}/* 按钮样式 */.hidden_btn {display: flex;width: 100%;justify-content: center;align-items: center;margin: 1%;}.btn_psn {width: 50%;display: flex;justify-content: center;align-items: center;height: 15px;color: #ccc;cursor: default;}.btn_psn:hover {/* 鼠标样式设置为默认手势 */cursor: default;width: 50%;display: flex;justify-content: center;align-items: center;height: 15px;color: #000;background-image: linear-gradient(to right, rgb(196, 206, 218, 0) 0%, rgb(196, 206, 218, 0.5) 50%, rgb(196, 206, 218, 0) 100%);/* 多个渐变色 */}.btn_arrow {padding: 5px;height: 100%;transform: rotate(90deg);}.arrow-up { transform: rotate(-90deg);}.arrow-down {transform: rotate(90deg);}/* 隐藏的数据样式,开始设置为不展示 */#hidden_data {display: none;}</style></head><body><h3>这是一个关于display让div显示与隐藏的测试</h3><!-- 第一部分：需要显示的部分 --><div class="content"><div class="item"><span>姓名：</span><input type="text"></div><div class="item"><span>年龄：</span><input type="text"></div><div class="item"><span>性别：</span><input type="text"></div><div class="item"><span>生日：</span><input type="text"></div></div><!-- 按钮 --><div class="hidden_btn"><div class="btn_psn" onclick="toggleHiddenBtn()"><div class="btn_arrow" id="arrow">></div></div></div><!-- 第二部分：可显示可隐藏的部分 --><div class="content" id="hidden_data"><div class="item"><span>姓名：</span><input type="text"></div><div class="item"><span>年龄：</span><input type="text"></div><div class="item"><span>性别：</span><input type="text"></div><div class="item"><span>生日：</span><input type="text"></div></div><!-- 写入js,实现主体样式的隐藏与显示的切换 --><script>function toggleHiddenBtn() {var hiddenBtn = document.getElementById("hidden_data");var arrow = document.getElementById("arrow");if (hiddenBtn.style.display === "none") {hiddenBtn.style.display = "flex";arrow.classList.remove("arrow-down");arrow.classList.add("arrow-up");} else {hiddenBtn.style.display = "none";arrow.classList.remove("arrow-up");arrow.classList.add("arrow-down");}}</script></body>
</html>
