使用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 相关文章推荐
javascript编程起步(第五课)
Jan 10 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
详解 微信小程序开发框架(MINA)
May 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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
PHP_MySQL教程-第一天
2007/03/18 PHP
PHP读取目录下所有文件的代码
2008/01/07 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
php源码的安装方法和实例
2019/09/26 PHP
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
python入门教程之识别验证码
2017/03/04 Python
Python3.6简单反射操作示例
2018/06/14 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
python变量的作用域是什么
2020/05/26 Python
Python通过len函数返回对象长度
2020/10/22 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
上课迟到检讨书
2014/02/19 职场文书
专项法律服务方案
2014/06/11 职场文书
学校教师读书活动总结
2014/07/08 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
长征观后感
2015/06/09 职场文书