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 相关文章推荐
js对象数组按属性快速排序
Jan 31 Javascript
jsonp原理及使用
Oct 28 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
vue浏览器返回监听的具体步骤
Feb 03 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产生动态的影像图
2006/10/09 PHP
php 删除无限级目录与文件代码共享
2008/11/22 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
Python获取央视节目单的实现代码
2015/07/25 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
flask项目集成swagger的方法
2020/12/09 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
平安校园建设方案
2014/05/02 职场文书
创业女性典型材料
2014/05/02 职场文书
初三新学期计划书
2014/05/03 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
针对吵架老公保证书
2015/05/08 职场文书
音乐会主持人开场白
2015/05/28 职场文书
今日说法观后感
2015/06/08 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
2016年情人节广告语
2016/01/28 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
go语言-在mac下brew升级golang
2021/04/25 Golang
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS