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 相关文章推荐
prototype Element学习笔记(篇二)
Oct 26 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
VuePress 中如何增加用户登录功能
Nov 29 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
详解JavaScript的计时器和按钮效果设置
Feb 18 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 开发环境配置(测试开发环境)
2010/04/28 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
学习ExtJS Column布局
2009/10/08 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
子页向父页传值示例
2013/11/27 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
Python with用法实例
2015/04/14 Python
Python导出DBF文件到Excel的方法
2015/07/25 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
python复制文件到指定目录的实例
2018/04/27 Python
python+flask实现API的方法
2018/11/21 Python
python程序变成软件的实操方法
2019/06/24 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
python属于解释语言吗
2020/06/11 Python
python编写实现抽奖器
2020/09/10 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
建筑总经理岗位职责
2014/02/02 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
小平小道观后感
2015/06/09 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
alibaba seata服务端具体实现
2022/02/24 Java/Android
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript