前端:实现div的隐藏与显示

效果

完整代码

html 复制代码
<!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">&gt;</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>
相关推荐
WTSolutions13 分钟前
Excel 转 JSON by WTSolutions API 文档
javascript
努力只为躺平16 分钟前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown17 分钟前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
DoraBigHead43 分钟前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试
嘉琪0011 小时前
封装一个有最小化的dialog组件
前端·javascript·css
李明卫杭州1 小时前
希尔排序
前端·javascript
爱学习的茄子1 小时前
JavaScript闭包应用场景完全指南:从基础概念到工程实践
前端·javascript·面试
用户2519162427111 小时前
Canvas之绘制图形
前端·javascript·canvas
gnip1 小时前
99%前端不知道的API WebTransport
前端·javascript
Lazy_zheng2 小时前
React 核心 API 全景实战:从状态管理到性能优化,一网打尽
前端·javascript·react.js