使用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 相关文章推荐
js prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
热点新闻滚动特效的js代码
Aug 17 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
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 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
php引用传值实例详解学习
2013/11/06 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
在python中安装basemap的教程
2018/09/20 Python
Flask框架web开发之零基础入门
2018/12/10 Python
Python调用C/C++的方法解析
2020/08/05 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
一年级数学教学反思
2014/02/01 职场文书
保护环境标语
2014/06/09 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
通知书大全
2015/04/27 职场文书
地球上的星星观后感
2015/06/02 职场文书