jQuery复合事件结合toggle()方法的用法示例


Posted in jQuery onJune 10, 2017

本文实例讲述了jQuery复合事件结合toggle()方法的用法。分享给大家供大家参考,具体如下:

定义和用法

toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。

语法:

$(selector).toggle(function1(),function2(),functionN(),...)
当指定元素被点击时,在两个或多个函数之间轮流切换。

与方法hide()show()绑定使用,可实现折叠效果;

具体事例:

<script type="text/javascript" src="js/jquery.js "></script>
<script type="text/javascript">
 $(function(){
    $("#dt1").toggle(
      function(){$("#div1").show();},
      function(){$("#div1").hide();}
    );
   })
</script>
<dl>
  <dt id="dt1">新闻管理</dt>
  <div id="div1">
  <dd>发布新闻</dd>
  <dd>新闻列表</dd>
  <dd>回收站</dd>
  </div>
</dl>

PS:这里再附上javascript常见事件与功能说明的在线对照表供大家参考:

javascript事件与功能说明大全:
http://tools.3water.com/table/javascript_event

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jQuery实现div跟随鼠标移动
Aug 20 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jquery自定义组件实例详解
Dec 31 jQuery
jQuery复合事件用法示例
Jun 10 #jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 #jQuery
jQuery正则验证注册页面经典实例
Jun 10 #jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 #jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 #jQuery
jQuery为某个div加入行样式
Jun 09 #jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 #jQuery
You might like
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
基于Python的身份证号码自动生成程序
2014/08/15 Python
python单元测试unittest实例详解
2015/05/11 Python
在Python中使用成员运算符的示例
2015/05/13 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
六道php面试题附答案
2014/06/05 面试题
智乐游戏测试笔试题
2014/05/21 面试题
销售实习自我鉴定
2013/12/07 职场文书
手机促销活动方案
2014/02/05 职场文书
运动会解说词200字
2014/02/06 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
2014年德育工作总结
2014/11/20 职场文书
小学生通知书评语
2014/12/31 职场文书
共青团员自我评价
2015/03/10 职场文书
品德与社会教学反思
2016/02/24 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js