jQuery中toggle()函数的使用实例


Posted in Javascript onApril 17, 2015

今天遇到一个有趣的例子,将它记录下来。

一个一级菜单,里边有一个二级菜单,二级菜单是通过锚点来链接页面元素的。想要实现的效果是当点击锚点时,页面链接到相应锚点,同时二级菜单隐藏,再点击一级菜单时,继续执行。。

其中试了很多种方法都不行,最后通过读jquery的toggle函数实现了。

//这样写可以
    $(".nav").toggle(function(){
      $(".content").slideToggle();
    });
    //这样写不可以
    $(".nav").toggle(function(){
     $(".content").slideDown();
   },function(){
     $(".content").slideUp();
   });
   //这样写也可以
    $(".nav").click(function(){
      $(".content").toggle("slow");
    });

另附上toggle()的使用说明

toggle(fn,fn)

每次点击时切换要调用的函数。
如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

可以使用unbind("click")来删除。

返回值
jQuery

参数

fn (Function) : 第奇数次点击时要执行的函数。

fn (Function) : 第偶数次点击时要执行的函数。

示例

对表格的切换一个类

jQuery 代码:

$("td").toggle( 
function () { 
$(this).addClass("selected"); 
}, 
function () { 
$(this).removeClass("selected"); 
} 
);

补充:toggle只有点击的时候好使,hover只是鼠标移进移出的事件,跟点击没关系。两个可以一起用

Javascript 相关文章推荐
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
js 单引号 传递方法
Jun 22 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
浅谈JS继承_借用构造函数 & 组合式继承
Aug 16 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
JQuery实现可直接编辑的表格
Apr 16 #Javascript
JS中捕获console.log()输出的方法
Apr 16 #Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 #Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 #Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 #Javascript
JavaScript动态修改背景颜色的方法
Apr 16 #Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 #Javascript
You might like
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
理解Javascript_10_对象模型
2010/10/16 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
Python中操作符重载用法分析
2016/04/29 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
档案检查欢迎词
2014/01/13 职场文书
上课玩手机检讨书
2014/02/08 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
2016春节慰问信范文
2015/03/25 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
导游词之张家界
2019/10/31 职场文书