jquery 中toggle的2种用法详解(推荐)


Posted in Javascript onSeptember 02, 2016

一、在元素的click事件中绑定两个或两个以上的函数  toggle不像bind需要在后面添加"click"来绑定click触发事件,toggle本身就是click触发的(而且只能click触发),

如下实例:

<input id="btntest" type="button" value="点一下我" />
<div>我是动态显示的</div>

<script type="text/javascript">
  $(function () {
    $("#btntest")
      $("#btntest").toggle(
      function(){
        $("div").html("我变了!");
      },
      function(){
        $("div").html("我又变了!");
      });
    });
</script>

二、切换元素的显示与隐藏效果:

<input id="btntest" type="button" value="点一下我" />
<div>我是动态显示的</div>

<script type="text/javascript">
  $(function () {
    $("#btntest").bind("click",function(){
      $("div").toggle(500);//此处的 500 是隐藏显示的延迟时间,默认为0,也可以用"slow","normal"或"fast"
                 //如果里面的值为true(toggle(true))时只能显示元素,值为false(toggle(false))时只能隐藏元素。) }) }); </script>

以上这篇jquery 中toggle的2种用法详解(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
javascript中如何判断类型汇总
May 14 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
Paypal支付不完全指北
Jun 04 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 #Javascript
AngularJs  E2E Testing 详解
Sep 02 #Javascript
解决node.js安装包失败的几种方法
Sep 02 #Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 #Javascript
AngularJs Understanding the Controller Component
Sep 02 #Javascript
JS 拼凑字符串的简单实例
Sep 02 #Javascript
AngularJs Understanding the Model Component
Sep 02 #Javascript
You might like
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
PHP高自定义性安全验证码代码
2011/11/27 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
js对象的复制继承实例
2015/01/10 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL