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 相关文章推荐
用js实现随机返回数组的一个元素
Aug 13 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
js获取和设置属性的方法
Feb 20 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 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
3.从实例开始
2006/10/09 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
Add a Table to a Word Document
2007/06/15 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
python实现textrank关键词提取
2018/06/22 Python
python环境下安装opencv库的方法
2020/03/05 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
canvas线条的属性详解
2018/03/27 HTML / CSS
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
小学生自我鉴定
2013/10/12 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
北京故宫导游词
2015/01/31 职场文书
小学教师求职信范文
2015/03/20 职场文书
英文产品推荐信
2015/03/27 职场文书