jQuery中hover方法和toggle方法使用指南


Posted in Javascript onFebruary 27, 2015

jQuery提供一些方法(如:toggle)将两种事件效果合并到一起,比如:mouseover、mouseout;keyup、keydown等

1、hover函数

    hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
参数:
    over (Function) : 鼠标移到元素上要触发的函数。
    out (Function): 鼠标移出元素要触发的函数。

<script type="text/javascript">

$(function(){

    $("#panel h5.head").hover(function(){

        $(this).next().show();// 鼠标悬浮时触发

    },function(){

        $(this).next().hide();// 鼠标离开时触发

    })

})

</script>

2、toggle函数

    toggle(fn,fn) 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。 可以使用unbind("click")来删除。

<script type="text/javascript">

$(function(){

    $("#panel h5.head").toggle(function(){

        $(this).next().show();// 第一次点击时触发

    },function(){

        $(this).next().hide();// 第二次点击时触发,之后不停的切换

    })

})

</script>

toggle() 方法切换元素的可见状态。
如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。toggle()方法切换元素的可见状态。
如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

所以上述的代码还可以写成:

<script type="text/javascript">

$(function(){

    $("#panel h5.head").toggle(function(){

         $(this).next().toggle();

    },function(){

         $(this).next().toggle();

    })

})

/*$(function(){

    $("#panel h5.head").click(function(){

         $(this).next().toggle();

    })

})*/

</script>

还可以添加一些css样式:

<style type="text/css">

.highlight{ background:#FF3300; }

</style>

<script type="text/javascript">

$(function(){

    $("#panel h5.head").toggle(function(){//配合css样式使用

        $(this).addClass("highlight");

        $(this).next().show();

    },function(){

        $(this).removeClass("highlight");

        $(this).next().hide();

    });

})

</script>

小伙伴们是否对jQuery中常见的hover事件和toggle事件有了新的认识了呢,希望本文能给大家带来一些帮助。

Javascript 相关文章推荐
javascript object array方法使用详解
Dec 03 Javascript
jquery图片切换实例分析
Apr 15 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
Javascript编程之继承实例汇总
Nov 28 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
Vue基础配置讲解
Nov 29 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
JS实现往下不断流动网页背景的方法
Feb 27 #Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 #Javascript
asp.net+js实现金额格式化
Feb 27 #Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 #Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 #Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 #Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 #Javascript
You might like
php抓即时股票信息
2006/10/09 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
网站上面有这种切换效果
2006/06/26 Javascript
JavaScript this 深入理解
2009/07/30 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
详解python解压压缩包的五种方法
2019/07/05 Python
Python简单实现区域生长方式
2020/01/16 Python
python从Oracle读取数据生成图表
2020/10/14 Python
应用电子专业学生的自我评价
2013/10/16 职场文书
传媒专业推荐信范文
2013/11/23 职场文书
平安建设工作方案
2014/06/02 职场文书
校园标语大全
2014/06/19 职场文书
期中考试复习计划
2015/01/19 职场文书
教师个人师德总结
2015/02/06 职场文书
郭明义观后感
2015/06/08 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL
Python中字符串对象语法分享
2022/02/24 Python
vue判断按钮是否可以点击
2022/04/09 Vue.js