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

div隐藏但是依然占位置的更多相关文章

  1. JD . 圆角矩形、权重层级、浮动撑开盒子及元素的默认间距、清除浮动、隐藏盒子、盒子的撑开与撑破、子盒子垂直居中|不占位置

    ---恢复内容开始--- 圆角矩形 border-radius:50%  40%  30%  33px:   像素.百分比.小数( 0.5 ) 左上.右上.右下.左下 权重: 标签 1 : 类选择器 ...

  2. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  3. 004：CSS三大重点之二：浮动（拖标、不占位置、转行内块）

    目录 1:拖标.不占位.转行内块 2:首先浮动的盒子需要和标准流的父级搭配使用,其次 特别的注意浮动可以使元素显示模式体现为行内块特性. 3:清除浮动 前言 CSS的定位机制有3种:普通流(标准流). ...

  4. javascript-设置div隐藏

    html code: <div class="title"> <ul id="col02_left_title"> <li> ...

  5. js获取div相对屏幕的坐标位置

    1:div相对屏幕的坐标位置 function getDivPosition(div){ var x = div.getBoundingClientRect().left; var y = div.g ...

  6. 点击一个div隐藏另一个div

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  8. 获取div相对文档的位置

    获取div相对文档的位置,两个方法 经测试 document.getElementById("btn").getBoundingClientRect() 在IE6下有2像素的bug ...

  9. DIV 浮动存不占空间

    DIV 浮动存不占空间比如<div style="width:80px; border:1px solid #333"><div style="floa ...

随机推荐

  1. Kattis -I Can Guess the Data Structure!

    I Can Guess the Data Structure! There is a bag-like data structure, supporting two operations: 1 x1  ...

  2. 阿里云数据库MySQL版快速上手！

    MySQL是全球最受欢迎的开源数据库,其在各Web应用中均有广泛部署.阿里云数据库MySQL版基于Alibaba的MySQL源码分支,经过双11高并发.大数据量的考验,拥有优良的性能和吞吐量.除此之外 ...

  3. CF992E Nastya and King-Shamans_线段树

    Code: #include<cstdio> #include<algorithm> using namespace std; const int maxn = 200000 ...

  4. 你应该更新的 Java 知识

    作者:dreamhead 出处:<你应该更新的Java知识>系列 你应该更新的 Java 知识 Tag:你应该更新的Java知识 Java Guava 集合 版权声明:转载时请以超链接形式 ...

  5. js类的使用

    brush示例 以d3的一个brush进行叙述,示例见: https://bl.ocks.org/xunhanliu/6f0b46789842e9e19e6cfe9bd0b16806 应用情形: 当页 ...

  6. HDU 1348 Wall （ 凸包周长 ）

    链接:传送门 题意:给出二维坐标轴上 n 个点,这 n 个点构成了一个城堡,国王想建一堵墙,城墙与城堡之间的距离总不小于一个数 L ,求城墙的最小长度,答案四舍五入 思路:城墙与城堡直线长度是相等的, ...

  7. UVA 11478 Halum

    Halum Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVA. Original ID: 114 ...

  8. [POJ3233]Matrix Power Series 分治+矩阵

    本文为博主原创文章,欢迎转载,请注明出处 www.cnblogs.com/yangyaojia [POJ3233]Matrix Power Series 分治+矩阵 题目大意 A为n×n(n<= ...

  9. POJ 3071

    求概率.其实跟枚举差不多,输入n即是要进行n轮比赛.对每一支球队,设求1的概率,首先1要与2比赛为p1,这是第一轮,第二轮时,1要与3(打败3为p2),4(打败4为p3)中胜者比赛,由于是概率,则两者 ...

  10. Could not connect to SMTP host: localhost, port: 25;

    1.错误描写叙述 DEBUG: setDebug: JavaMail version 1.3.3 DEBUG: getProvider() returning javax.mail.Provider[ ...