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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
js实现电灯开关效果
Jan 19 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
mysql 性能的检查和优化方法
2009/06/21 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
python比较两个列表大小的方法
2015/07/11 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
python实现年会抽奖程序
2019/01/22 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
深入解析神经网络从原理到实现
2019/07/26 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
python的json包位置及用法总结
2020/06/21 Python
生育关怀行动实施方案
2014/03/26 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
雷锋的故事观后感
2015/06/10 职场文书
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang
如何基于python实现单目三维重建详解
2022/06/25 Python