JS小案例，实现功能按键的隐藏与现实

最新推荐文章于 2022-03-08 16:24:24 发布

小队员

最新推荐文章于 2022-03-08 16:24:24 发布

阅读量943

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u014067713/article/details/65444400

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

重点学习几个关键的juery方法 toggleClass/hasClass hide/show 还有$().find

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>功能栏显示与隐藏测试</title>
    <script src="jquery-2.1.1.js"></script>
    <style type="text/css">
        body{
     //       background-image: url(img/bg.png);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .header-bg{
            border:none;
            background-color: rgba(0,0,0,.2) !important;
            height:40px;
        }
        .header-txt{
            text-align: center;
            font-size: 20px;
            padding-top: 5px;
            color:#eeeeee;
        }
        #left-wrapper{
            position:absolute;
            height:100%;
            margin:0;
            left:0;
            overflow: hidden;
            z-index: 999;
            background: rgba(0,0,0,.3);
        }
        #right-wrapper{
            position:absolute;
            right:0;
            margin:0;
            height:100%;
            background: rgba(0,0,0,.3);
            overflow: hidden;
        }
        .underlay{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            border:solid 1px lightseagreen;
            z-index:0;
        }
        .left-menu{
              overflow:auto;
              float:left;
              height:inherit;
          }
        .right-menu{
            height: inherit;
            overflow: auto;
            float: right;
        }
        .left-scaling,.right-scaling{
            float:right;
            width:10px;
            height:100%;
            cursor:pointer;
            background: rgba(0,0,0,.3);
        }
        .right-scaling{
            float:left;
        }
        .main-icon{
            padding:15px 0;
            margin:0 20px;
        }
        .main-icon li{
            color:#eeeeee;
            width: 140px;
            text-align: center;
            padding: 8px 0;
            margin: 15px 0;
            font-size: 17px;
            border-radius: 8px;
            border: 1px solid transparent;
        }
        .norraw{
            position: absolute;
            top: 50%;
            width: 10px;
            height: 100px;
            margin-top: -50px;
            line-height: 100px;
            text-align: center;
            border-radius: 50px;
            background: #00c37d;
            cursor: pointer;
        }
        #mid-wrapper{
            position:absolute;
            height:100%;
            margin:0;
            text-align: center;
            font-size:30px;
        }
    </style>
</head>
<body>
    <!--头部-->
    <div id="header" class="header-bg">
        <div class="header-txt">
            <span>屏幕显示效果测试</span>
        </div>
    </div>
    <!--中间部分-->
    <div id="wrapper">
        <!--左边导航-->
        <div id="left-wrapper">
            <iframe class="underlay" ></iframe>
            <div class="left-menu">
                <ul class="main-icon">
                    <li><span>查询内容1</span></li>
                    <li><span>查询内容2</span></li>
                    <li><span>查询内容3</span></li>
                    <li><span>查询内容4</span></li>
                    <li><span>查询内容5</span></li>
                </ul>
            </div>
            <div class="left-scaling">
                <div class="norraw">
                </div>
            </div>
        </div>
        <!--显示区域-->
        <div id="mid-wrapper">
            <span>内容显示区域</span>
        </div>
        <!--右侧导航-->
        <div id="right-wrapper">
            <div class="right-scaling">
                <div class="norraw">
                </div>
            </div>
            <div class="right-menu">
                <ul class="main-icon">
                    <li><span>查询内容1</span></li>
                    <li><span>查询内容2</span></li>
                    <li><span>查询内容3</span></li>
                    <li><span>查询内容4</span></li>
                    <li><span>查询内容5</span></li>
                </ul>
            </div>
        </div>
    </div>
    <!--底部-->
    <div id="footer">
    </div>

    <script>
        $(document).ready(function(){
           $(".left-scaling").click(function(){
               $(this).find(".norraw").toggleClass("show_or_hide");
               if($(this).find(".norraw").hasClass("show_or_hide")){
                   $(".left-menu").hide();
                   $(".norraw").show();
               }
               else{
                   $(".left-menu").show();
                   $(".norraw").show();
               }
            })

           $(".right-scaling").click(function(){
               var nowEle = $(this).find(".norraw");
               nowEle.toggleClass("show_or_hide");
               if(nowEle.hasClass("show_or_hide")){
                   $(".right-menu").hide();
                   $(".norraw").show();
               }
               else{
                   $(".right-menu").show();
                   $(".norraw").show();
               }
           })
        });
    </script>
</body>
</html>

小队员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS小案例，实现功能按键的隐藏与现实

重点学习几个关键的juery方法 toggleClass/hasClass hide/show 还有$().find 功能栏显示与隐藏测试 body{ // background-image: url(img/bg.png); background-repeat: no-repeat;
复制链接

扫一扫

专栏目录