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 相关文章推荐
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
javascript关于继承解析
May 10 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 Javascript
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
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
php中Ctype函数用法详解
2014/12/09 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
机器学习10大经典算法详解
2017/12/07 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
python的sorted用法详解
2019/06/25 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
应届毕业生求职信范例分享
2013/12/17 职场文书
《菜园里》教学反思
2014/04/17 职场文书
出售房屋协议书范本
2014/10/06 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers