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 相关文章推荐
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
用VsCode编辑TypeScript的实现方法
May 07 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实现ping
2006/10/09 PHP
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
php生成无限栏目树
2017/03/16 PHP
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
python requests使用socks5的例子
2019/07/25 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
建筑工地宣传标语
2014/06/18 职场文书
保管员岗位职责
2015/02/14 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
如何在python中实现ECDSA你知道吗
2021/11/23 Python
maven依赖的version声明控制方式
2022/01/18 Java/Android
带你了解Java中的ForkJoin
2022/04/28 Java/Android
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis