<!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. 常用几个空格的 Unicode 码

    const SPACE_UNICODE = { 'ensp': '\u2002', 'emsp': '\u2003', 'nbsp': '\u00a0' }

  2. 02《UML大战需求分析》阅读笔记之二

    UML虽然是一种新的工具,但同时也代表了一种新的先进的思考方法,所以学习UML的关键不在于学习语法,而是要改变思维习惯.所以我觉得我还需要系统地培养几方面的能力,如书面表达能力,归纳总结能力,“面向对 ...

  3. 如何打开DOS控制台及常见DOS命令作用

    如何打开DOS控制台? * A:xp下如何打开DOS控制台?     * a:开始--程序--附件--命令提示符     * b:开始--运行--cmd--回车     * c:win+r--cmd- ...

  4. Pyhton学习——Day10

    #################################################################################################### ...

  5. Python——wordcloud

    import jiebafrom wordcloud import WordCloud,STOPWORDSimport matplotlib.pyplot as pltfrom scipy.misc ...

  6. oracle中nvl函数用法

    1.返回两个字段中非空字段的值,第一个字段非空,返回第一个字段的值,第二个字段值为null,则返回第二个字段的值,如果都为null 则返回null. select nvl(a,b) from tabl ...

  7. 窗口管理工具 screen

    简介 Screen是一款用于命令行终端切换的自由软件 用户可以通过该软件同时连接多个本地或远程的命令行会话,并在其间自由切换 GNU Screen可以看作是窗口管理器的命令行界面版本 它提供了统一的管 ...

  8. 归档 SCP SFTP RSYNC（数据同步）

    tar 选项  目标文件  源文件(1 2 3) tar cf **.tar file1 file2 file3 (默认情况下 cf选项只有归档没有压缩) tar xf 从归档中提取 创建tar的存档 ...

  9. 题解 P1337 【[JSOI2004]平衡点 / 吊打XXX】

    这道题调了好久,果然非洲人是得不到眷顾的吗... 本题采用模拟退火解决. 模拟退火是一种简洁明了而又高效的近似算法,基本上可以套到任何求最优解的题目上去. 它的原理是模拟物理中金属退火的现象,凭借选手 ...

  10. Docker可视化管理工具对比(DockerUI、Shipyard、Rancher、Portainer)

    1.前言 谈及docker,避免不了需要熟练的记住好多命令及其用法,对于熟悉shell.技术开发人员而言,还是可以接受的,熟练之后,命令行毕竟是很方便的,便于操作及脚本化.但对于命令行过敏.非技术人员 ...