div隐藏但是依然占位置

最新推荐文章于 2024-09-03 23:04:46 发布

aozhang1070

最新推荐文章于 2024-09-03 23:04:46 发布

阅读量1.8k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/loveMis/p/8996051.html

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src = "../libs/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src = "../libs/popper.min.js"></script>
<script type="text/javascript" src = "../libs/bootstrap.min.js"></script>
<link rel="stylesheet" href="../libs/bootstrap.min.css">
<title>无标题文档</title>
</head>
<style>
    
    .row{
        border: 1px solid red;
    }
    </style>
<body>
<div class="row">
    <div class="col-xl-12">
        <input type="text" id = "one">
    </div>
</div>
<div class="row" style="background-color: red;width: 40%; visibility: visible" id = "two">
    <div class="col-xl-12">
            <span>1</span> <br>
        <span>2</span><br>
        <span>3</span>
    </div>

</div>
<div class="row">
    <div class="col-12" style="background-color: aqua">
        <span>111</span> <br>
        <span>111</span> <br>
        <span>111</span> <br>
        <span>111</span>
    </div>
</div>
</body>
</html>
<script>
    $(document).ready(function(){
        $("#one").click(function(){
            var a = $("#two").css("visibility");
            if(a == "visible"){
                $("#two").css("visibility","hidden");
            }else{
                $("#two").css("visibility","visible");
            }
            
        });

    });



</script>