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 相关文章推荐
JQuery this 和 $(this) 的区别
Aug 23 Javascript
学习ExtJS TextField常用方法
Oct 07 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
ES10 特性的完整指南小结
Mar 04 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
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使用codebase生成随机数
2014/03/25 PHP
php利用事务处理转账问题
2015/04/22 PHP
php实现的mongodb操作类
2015/05/28 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python创建线程示例
2014/05/06 Python
python进阶教程之模块(module)介绍
2014/08/30 Python
Python匹配中文的正则表达式
2016/05/11 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
什么是方法的重载
2013/06/24 面试题
2014年副班长工作总结
2014/12/10 职场文书
初中生活随笔
2015/08/15 职场文书
个人道歉信大全
2019/04/11 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis