使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)


Posted in Javascript onSeptember 01, 2016

这是一个示例:

<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").toggle(); //toggle()方法进行显示隐藏交互事件,如果显示的就进行隐藏,如果是隐藏的就显示
});
$(".btn2").toggle(2000,function(){
$(".div2").toggle(); //callback
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
<button class="btn2">Toggle2</button>
<div class="div1">http://www.cnblogs.com/sosoft/</div>
<div class="div2" style="display:none">柔成</div>
</body>
</html>

  示例中用到的toggle()方法:

toggle() 方法切换元素的可见状态。如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

语法$(selector).toggle(speed,callback,switch)

使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)

PS:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素(但不适用于 visibility:hidden 的元素)。

以上所述是小编给大家介绍的使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
jQuery使用手册之二 DOM操作
Mar 24 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
javascript学习之json入门
Dec 22 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
详解puppeteer使用代理
Dec 27 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 #Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 #Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 #Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 #Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 #Javascript
javaScript如何跳出多重循环break、continue
Sep 01 #Javascript
AngularJs bootstrap详解及示例代码
Sep 01 #Javascript
You might like
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
JQuery 入门实例1
2009/06/25 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
python文件操作整理汇总
2014/10/21 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
python实现自动解数独小程序
2019/01/21 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
基于Python解密仿射密码
2019/10/21 Python
使用Pycharm分段执行代码
2020/04/15 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
会计实习期自我鉴定
2013/10/06 职场文书
建筑投标担保书
2014/05/20 职场文书
扬尘污染防治方案
2014/06/15 职场文书
论语读书笔记
2015/06/26 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
Nginx配置使用详解
2022/07/07 Servers