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 miscellanea -display data real time, using window.status
Jan 09 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
vue中配置scss全局变量的步骤
Dec 28 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
逆序二维数组插入一元素的php代码
2012/06/08 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
PHP实现百度人脸识别
2019/05/06 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
PHP7 新增常量
2021/03/09 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中特殊函数集锦
2015/07/27 Python
简单讲解Python中的闭包
2015/08/11 Python
python表格存取的方法
2018/03/07 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
个人自荐信
2013/12/05 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
浅谈python中的多态
2021/06/15 Python
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫