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 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
JavaScript.Encode手动解码技巧
Jul 14 Javascript
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 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 CURL用法的深入分析
2013/06/09 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
简单的通用表达式求10乘阶示例
2014/03/03 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
速记Python布尔值
2017/11/09 Python
对python 命令的-u参数详解
2018/12/03 Python
python的sys.path模块路径添加方式
2020/03/09 Python
露营世界:Camping World
2017/02/02 全球购物
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
竞聘演讲稿范文
2014/01/12 职场文书
销售辞职报告范文
2014/01/12 职场文书
校园广播稿精选
2014/10/01 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
首次购房证明
2015/06/19 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python