div隱藏但是依然占位置


<!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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM