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中this做事件参数相关问题解答
Mar 17 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
原生js的数组除重复简单实例
May 24 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
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
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
python使用smtplib模块发送邮件
2020/12/17 Python
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
专科毕业生学习生活的自我评价
2013/10/26 职场文书
青年文明号服务承诺
2014/03/31 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
MySQL如何使备份得数据保持一致
2022/05/02 MySQL
SpringBoot详解执行过程
2022/07/15 Java/Android