前端:实现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>
相关推荐
渣哥4 分钟前
你以为只是名字不同?Spring 三大注解的真正差别曝光
javascript·后端·面试
小六路5 分钟前
可以横跨时间轴,分类显示的事件
前端·javascript·vue.js
SuperherRo6 分钟前
JS逆向-安全辅助项目&JSRpc远程调用&Burp插件autoDecode&浏览器拓展V_Jstools(上)
javascript·安全·项目
Bellafu66620 分钟前
selenium的css定位方式有哪些
css·selenium·tensorflow
Jonathan Star1 小时前
跨域处理的核心是解决浏览器的“同源策略”限制,主流方案
javascript·chrome·爬虫
我有一棵树2 小时前
前端开发中 SCSS 变量与 CSS 变量的区别与实践选择,—— 两种变量别混为一谈
前端·css·scss
果粒chenl2 小时前
React学习(四) --- Redux
javascript·学习·react.js
rising start3 小时前
前端基础一、HTML5
前端·html·html5
Never_Satisfied3 小时前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
im_AMBER3 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习