Jquery实现显示和隐藏的4种简单方式


Posted in Javascript onAugust 28, 2013

使用jquery控制div的显示与隐藏,一句话就能搞定,例如:

1.$("#id").show()表示为display:block,
$("#id").hide()表示为display:none;

2.$("#id").toggle()切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,则切换为可见的。

3.$("#id").css('display','none');//隐藏
$("#id").css('display','block');//显示

或者

$("#id")[0].style.display='none';

display=none 控制对象的隐藏搜索

display=block控制对象的显示

4.$("#id").css('visibility','hidden');//元素隐藏

$("#id").css('visibility','visible');//元素显示

CSS visibility 属性规定元素是否可见。

visible 元素可见。
hidden 元素不可见。
collapse 在表格元素中使用时,此值可删除一行或一列,但它不影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
inherit 从父元素继承 visibility 属性的值。

注意:

display:none和visible:hidden都能把网页上某个元素隐藏起来,在视觉效果上没有区别,但是在一些DOM操作中两者有区别:
display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。
visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,即它仍然具有高度、宽度等属性,通俗来说就是看不见但摸得到。

//第1种方法 ,给元素设置style属性 
$("#hidediv").css("display", "block"); 
//第2种方法 ,给元素换class,来实现隐藏div,前提是换的class样式定义好了隐藏属性 
$("#hidediv").attr("class", "blockclass"); 
//第3种方法,通过jquery的css方法,设置div隐藏 
$("#blockdiv").css("display", "none"); 
 
$("#hidediv").show();//显示div  
$("#blockdiv").hide();//隐藏div

下面是一些实例补充

Html代码:

<div class="topicList"> 

<h3><span>学习天地</span></h3> 

<ul> 

<li>1111111111</li> 

<li>2222222222</li> 

<li>333333333</li> 

<li>4444444444</li> 

<li>5555555555</li> 

<li>6666666666</li> 

</ul> 

</div>

Jquery代码:
第一种实现方式:
1. <script type="text/javascript"> 

$(function(){ 

$(".topicList h3").click(function(){ 

var UL = $(this).next("ul"); 

if(UL.css("display")=="none"){ 

UL.css("display","block"); 

} 

else{ 

UL.css("display","none"); 

} 

}); 

}); 

</script>

第二种实现方式:
2. <script type="text/javascript"> 

$(function(){ 

$(".topicList h3").toggle(function(){ 

$(this).next("ul").hide(1000); 

},function(){ 

$(this).next("ul").show(1000); 

}); 

}); 

</script>

第三种实现方式:
可以使用Jquery提供的show和hide来完成带缓动的显示和隐藏效果,由于两个方法相似,可以直接使用toggle来完成。
3. <script type="text/javascript"> 

$(function(){ 

$(".topicList h3").toggle(function(){ 

$(this).next("ul").css("display","none"); 

},function(){ 

$(this).next("ul").css("display","block"); 

}); 

}); 

</script>

第四种实现方式:
toggle如果有两个参数,并且都是函数,表示第一次点击执行第一个函数,第二次点击执行第二个函数。
4. <script type="text/javascript"> 

$(function(){ 

$(".topicList h3").toggle(topicHandler,topicHandler); 

function topicHandler(){ 

//使用fadeIn、show、slideDown可以完成某个容器的显示 

//使用fadeOut、hide、slideUp可以完成某个容器的隐藏 

//所以可以通过各个的toggle来完成两个之间的轮换 

$(this).next("ul").toggle(1000); 

} 

}); 

</script>
Javascript 相关文章推荐
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 #Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 #Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 #Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 #Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 #Javascript
ExtJS DOM元素操作经验分享
Aug 28 #Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 #Javascript
You might like
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
python logging日志模块原理及操作解析
2019/10/12 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
高一历史教学反思
2014/01/13 职场文书
幼儿园元旦亲子活动方案
2014/02/17 职场文书
安全责任书范文
2014/03/12 职场文书
投标担保书范文
2014/04/02 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
法律意见书范本
2015/06/04 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书