<!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. Front End Developer Questions

    Front End Developer Questions 感谢大神分享- 目录 前言 HTML部分 CSS部分 JavaScript部分 其他问题 前端学习网站推荐 前言 前言 HTML Docty ...

  2. 学习ZBrush到底需不需要用数位板？

    在学习ZBrush时,要控制下笔的力度,而这一点是鼠标办不到的.这时就需要拥有一块手绘板.手绘板可以控制笔刷的力度. 在雕刻之前,要先来了解CG设计领域广泛应用的硬件产品—数位板,如图所示. 数位板又 ...

  3. Pyhton学习——Day26

    #多态:多态指的是一类事物有多种形态# import abc# class Animal(metaclass = abc.ABCMeta):# 同一类事物:动物# @abc.abstractclass ...

  4. maven的pom.xml配置json依赖

    <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</art ...

  5. Codeforces Round #506 (Div. 3) D-F

    Codeforces Round #506 (Div. 3) (中等难度) 自己的做题速度大概只尝试了D题,不过TLE D. Concatenated Multiples 题意 数组a[],长度n,给 ...

  6. Extjs win

    //创建window var win = Ext.create("Ext.window.Window", { id: "myWin", title: " ...

  7. 【Jim】I am back (ง •_•)ง

    其实上周就来考过一次试了,真是啥都忘了 (´ｰ∀ｰ`) 下午在写[树网的核],写了一半去吃饭,回来时发现高二机房的门被锁上了,于是他们都被堵在门口. 我就回到我的地方接着写码. 听到外面有个高二的妹子 ...

  8. CF1042F Leaf Sets (贪心+树上构造)

    题目大意:给你一棵树,让你对叶节点分组,保证每组中,任意两个叶节点之间的距离不大于K,求最小的组数 手动yy的贪心竟然对的 对于每个节点,维护一个$ma[i]$,表示在$i$节点的子树内 未被分组的叶 ...

  9. 安装Nginx的各种报错的解决

    如题,本人环境Ubuntu14.0虚拟机,安装一个nginx服务器来运行我的fastDfs文件管理的.但是安装出现了各种问题: sudo ./configure --prefix=/usr/local ...

  10. 题解 P3377 【【模板】左偏树（可并堆）】

    所谓的左偏树,是一种可并堆的实现. 这种数据结构能够支持高效的堆合并,但是不支持查询节点等操作,因此不同于平衡树,它的结构是不平衡的. 左偏树满足如下两条基本性质: 1. 堆的性质 这也就是说左偏树每 ...