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定时机制
Oct 29 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
angularjs实现首页轮播图效果
Apr 14 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
vue-lazyload使用总结(推荐)
Nov 01 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 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 中文处理函数集合
2008/08/27 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python正则表达式re模块详解
2014/06/25 Python
Python中字典和JSON互转操作实例
2015/01/19 Python
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
什么是python的列表推导式
2020/05/26 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
党员2014两会学习心得体会
2014/03/17 职场文书
工作会议主持词
2014/03/17 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
初三数学教学反思
2016/02/17 职场文书
检举信的写法
2019/04/10 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android