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 相关文章推荐
javascript while语句和do while语句的区别分析
Dec 08 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
使用jQuery实现购物车
Oct 29 jQuery
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
浅谈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
新52大事件
2020/03/03 欧美动漫
用定制的PHP应用程序来获取Web服务器的状态信息
2006/10/09 PHP
PHP的开发框架的现状和展望
2007/03/16 PHP
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
python计算牛顿迭代多项式实例分析
2015/05/07 Python
Python文件及目录操作实例详解
2015/06/04 Python
Python实现LRU算法的2种方法
2015/06/24 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
大专学生求职自荐信
2014/07/06 职场文书
学生评语集锦
2015/01/04 职场文书
毕业生个人总结
2015/02/28 职场文书
诚信考试主题班会
2015/08/17 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang