checkbox子元素隐藏

2024-11-05

根据复选框checkbox的选中状态来打开或关闭隐藏层

HTML: <input type="checkbox" id="check-expert"> <div id="expert" style="display:none">隐藏层</div> JS: $(function () { if ($("#check-expert").attr("checked") == "checked"

很多时候我们仅仅只是想让鼠标移动入某个元素,然后显示出某个元素. 大多数博客的标题或内容都是:使用CSS实现鼠标悬停在一行上,显示某些元素很遗憾,这是错误的,鼠标悬停后,尽管CSS标准中有定义此种方式以显示出某些元素,但是: 这只能显示出子元素. 例子: HTML端: <div class="test"> <span>鼠标移入显示</span> </div> <div class="dome"> <

margin折叠-从子元素margin-top影响父元素引出的问题

正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! html代码: <div id="fatherbox"> <div id="childbox">首页 </div> </div> css样式: #fatherbox{width:100%,height:64px;back

解决 border-radius 元素在应用了 transform 的子元素时overflow:hidden 失效的问题

受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上 overflow:hidden属性 .并且子元素填充整个父元素.于是看到的效果是:子元素超出父元素圆角的部分被隐藏掉,形成一个圆角头像容器的结构.代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta ch

jQuery选择器之子元素过滤选择器Demo

测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

jQuery编程基础精华02（属性、表单过滤器，元素的each，表单选择器，子元素过滤器(*)，追加方法，节点，样式操作）

属性.表单过滤器属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为“test”的<div>,jQuery中没有对getElementsByName进行封装,用$("input[name=abc]") $("div[title!=test]")选取title属性不为“test”的<div> 还可以选择开头[nam

关于在transform下的子元素设置fixed无效的困惑

最近的项目是要实现一个点击显示隐藏边栏的效果,而且需要边栏随着滚动而滚动. 思路简单,不就一个css的动画和一个position为fixed,搞定!但不想,设为fixed的子元素竟然无法fixed,这下颠覆我了.千辛万苦,细致排除,终于发现是transform导致的fixed失效,而且目前似乎没有解决方案,除非绕过.同时,也借此算是彻底知道百度跟google的差距了. 有两篇较有用的文章谈到了这个,地址分别是http://meyerweb.com/eric/thoughts/2011/09/12

jquery获取元素（父级的兄弟元素的子元素）

一.获取父级元素使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素使用jquery获取同级元素:siblings() 例如:$(this).parent('ul').siblings(); 三.获取子级元素使用jquery获取子级元素:find() 例如:$(this).parent('ul').siblings().find('li'); 常用例:(点击进行切换) $(function(){ $('.xxx li').cl

您可能不知道的CSS元素隐藏“失效”以其妙用

您可能不知道的CSS元素隐藏“失效”以其妙用 by zhangxinxu from http://www.zhangxinxu.com地址:http://www.zhangxinxu.com/wordpress/?p=2191 一.CSS元素隐藏在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: none; /* 不占据空间,无法点击 */ } { visibility:

给父元素与子元素分别设置visibility注意点

由于机顶盒的终端特性原因,不能用display:hidden去做隐藏,就选择了visibility:hidden. 在这里遇到一个现象: 给父元素设置了hidden,但是里面的子元素依然可见.以为只是盒子特性导致渲染出来和浏览器的不一样. 但是后来在做终端特性库的时候在浏览器上单独写了dome测试这个属性,发现父元素设置visibility:hidden,里面的子元素也不见了. 比较之前的项目的代码,找到原因了: 父元素设置hidden的同时,给子元素设置了visibility:visible.

关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案

以下是个人学习笔记,仅供学习参考. 1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题. 在给没有margin-top-border父元素中的子元素添加margin-top时,发现没有直接表现出来,而是作用到父元素身上,就会导致子元素的margin-top溢出. 条件: 1.父元素没有上边框 2.为第一个子元素设置上外边距时解决方案: 1.为父元素增加上边框弊端:父元素会变高 2.通过为父元素设置上内边距来取代子元

您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭

一.CSS元素隐藏在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间,无法点击 */ } { position: absolut

html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果

模态框: html部分:  <button id="box" onclick="pop_box()">弹出框</button>  <div class="div-container" id="div-container" style="display: none;"> <div class=&

子元素的margin-top会影响父元素

---恢复内容开始--- 之前在写项目的时候,发现原本想让父子元素之间加点边距,却让父元素产生了margin-top,于是百度之后发现了原因. 在css2.1盒模型中 In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of tw

CSS元素隐藏的display和visibility

一.CSS元素隐藏在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击. { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间,无法点击 */ } { position: absolute; top: -999

一个样例看清楚JQuery子元素选择器children()和find()的差别

近期在我们的hybrid app项目开发中定位出了一个问题.通过这个问题了解下JQuery选择器find()和children()的差别.问题是这种:我们的混合app是一个单页面应用(main.html),逻辑上的页面是通过项目自己定义的.mspl文件(事实上就是html文件)来呈现的. 比方a.mspl.b.mspl.c.mspl载入的时候,都会插入到main.html中.可是每次仅仅显示1个mspl文件,当b.mspl显示的时候,a.mspl和c.mspl就会被隐藏.在a.b.c这3 个页面

CSS中用 opacity、visibility、display 属性将元素隐藏的对比分析

说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见. opacity.visibility.display 这三个属性分别取值 0.hidden.none 都能使元素在页面上看不见,但是他们在方方面面都还是有区别的. 是否占据页面空间举个例子 <!doctype html> <html lang="en"> <head> <meta charset="

CSS元素隐藏方法总结

display:none; visibility:hidden; opacity:0三者的区别 display:none; 该属性会让元素完全从DOM中消失,浏览器不渲染设置该属性的元素,不占据DOM树空间无法进行事件监听,不可点击动态修改该属性会造成重排,性能较差继承性方面:非继承性!设置了该属性的元素的子元素即使设置display:block依然不会显示它的子元素 transition不支持display的显示隐藏动画效果,但是display:none不会影响animation的动画效

jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

<!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.11.3.js"&

透视 HTML子元素的margin-top样式会应用在父元素上的原由

情况说明当对页面中元素设置margin-top样式时,如果该元素有父元素,则margin-top会应用与父元素,子元素的top与父元素的top重叠.举例说明 <style>body{margin:0; padding:0;} .outerdiv{background: #;} .innerdiv{margin-top: 30px; background: #d33; height: 80px;} </style> <div class="outerdiv"

父容器利用opacity设置透明后，子元素跟着变透明的解决方案

背景半透明,子元素不透明的效果经常需要用到.通常对父容器使用opacity属性时,子元素也跟着变透明,所以不妨设置父容器的 background-color:rgba(r,g,b,x); 其中x取值从0到1,表示透明程度.