<!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. web.xml中的url-pattern写法规则及匹配过程

    servlet和filter在javaEE开发中很常用,因此有必要知道web.xml文件映射的规则 1.  写法 ①完全匹配:以“/”开头,以字母(非“*”)结束    如:<url-patte ...

  2. ZBrush中绘制层是什么意思？

    我们经常使用笔刷雕刻模型,在使用笔刷为头部模型添加一些纹理效果时,有时可能会有不满意的地方,但是很难修改,也很难把它还原为原来的状态,这时我们就可以使用Layers(绘制层)来将雕刻的部分分到每一个层 ...

  3. Python多进程原理与实现

    Date: 2019-06-04 Author: Sun 1 进程的基本概念 什么是进程? ​ 进程就是一个程序在一个数据集上的一次动态执行过程.进程一般由程序.数据集.进程控制块三部分组成.我们编写 ...

  4. CentOS 7 安装配置MySQL

    环境 CentOS Linux release 7.5.1804 (Core) MySQL:mysql80-community-release-el7-1 检查: 在centos7中默认的是maria ...

  5. [BOI2011]MET-Meteors

    题目:洛谷P3527. 题目大意:n个国家在某星球上建立了m个空间站(一个空间站只属于一个国家),空间站围成一个环.现在知道要下k天陨石,每天都在一个区间内下,每个点都下同样多的(若r>l,则说 ...

  6. linux下如何查看cpu信息

    linux的cpu信息可以从文件中cpuinfo读取. 执行命令: # cat  /proc/cpuinfo   我们一般看到的processor是逻辑核. 它的计数是从0开始的,例如这里看到的是31 ...

  7. 浅谈optparse 解析命令行参数库

    使用的背景 在工作中我们经常要制定运行脚本的一些参数,因为有些东西是随着我么需求要改变的,所以在为们写程序的时候就一定不能把写死,这样我们就要设置参数 在python中我们可以通过sys 模板的arg ...

  8. python_字典的使用

    '''info = { "stu1":"Lie","stu2":"Weite","stu3":&qu ...

  9. JQuery封装ajax的方法

    1.$.post方法 $.post(url[,data][,callback][,type]) url:请求的后台程序地址 data:发送到后台的数据 callback:载入成功时回调函数,该函数参数 ...

  10. JavaString库

    String库 .length() 字符串的长度,一个字符串为空(空字符串对象)和null(不指向任何对象)是两个概念,中文字符和英文字符是一样的计数(一个中文是一个字符,一个英文字母是一个字符) . ...