使用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 相关文章推荐
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
vue2.0 datepicker使用方法
Feb 04 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 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各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
python里对list中的整数求平均并排序
2014/09/12 Python
Python NumPy库安装使用笔记
2015/05/18 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python调用java的jar包方法
2018/12/15 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
什么是python的函数体
2020/06/19 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
介绍下WebSphere的安全性
2013/01/31 面试题
学生档案自我鉴定
2013/10/07 职场文书
校园网站的创业计划书范文
2013/12/30 职场文书
党员剖析材料范文
2014/12/18 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
机械生产实习心得体会
2016/01/22 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
七年级话题作文之执着
2019/11/19 职场文书