使用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 getElementsByClassName实现代码
Oct 11 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
探索Vue高阶组件的使用
Jan 08 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
原生js生成图片验证码
Oct 11 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
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
Yii全局函数用法示例
2017/01/22 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
js登录弹出层特效
2014/03/07 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
python中元组的用法整理
2020/06/15 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
计算机专业毕业生推荐信
2013/11/25 职场文书
大学总结自我鉴定
2014/01/18 职场文书
八年级物理教学反思
2014/01/19 职场文书
单位创先争优活动方案
2014/01/26 职场文书
学校消防演习方案
2014/02/19 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
微电影大赛策划方案
2014/06/05 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
Java 多线程协作作业之信号同步
2022/05/11 Java/Android