利用jQuery极简代码完成下拉菜单滑动效果
发布日期:2022-02-28 20:48:36
浏览次数:19
分类:技术文章
本文共 1123 字,大约阅读时间需要 3 分钟。
当我们制作网页时,有的时候会想拥有一个酷炫且顺滑的下拉菜单,虽然我们使用最基础的css和js也可以完成,但利用jQuery我们只需要非常简短的代码即可完成下面的效果
是不是非常的顺滑呢?鼠标移动到目标上自动的下拉菜单 ,只需要这样两行代码:
$(" ").hover(function() {$(this).children(" ").slideToggle();});
其中,hover是鼠标经过和离开的复合写法,通常会这样写
$(" ").hover(function() { $(this).children(" ").slideDown( ); }, function() { $(this).children(" ").slideUp( ); });
即在hover中写两个函数,一个是鼠标经过的一个是鼠标离开的,两者用逗号隔开,但是可以看到我上面的代码只写了一个函数,这是因为,如果我们只在hover里写一个函数,那么当鼠标经过或离开时都会重复这个效果,这样的写法更加简便。
放在整体代码中这样使用:
转载地址:https://blog.csdn.net/weixin_53379398/article/details/119460960 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
不错!
[***.144.177.141]2024年04月12日 10时33分08秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
JDK源码研究Jstack,JMap,threaddump,dumpheap的原理
2019-04-27
Java使用字节码和汇编语言同步分析volatile,synchronized的底层实现
2019-04-27
javac编译原理和javac命令行的使用
2019-04-27
Unity使用UnityWebRequest实现本地日志上传到web服务器
2019-04-27
Unity使用RenderTexture实现裁切3D模型
2019-04-27
美术和程序吵架,原来是资源序列化格式设置不统一
2019-04-27
Unity iOS接SDK,定制UnityAppController
2019-04-27
Unity iOS接SDK前先要了解的知识(Objective-C)
2019-04-27
记一次iOS闪退问题的定位:NSLog闪退
2019-04-27
Unity打开照相机与打开本地相册然后在Unity中显示照片(Android与iOS)
2019-04-27
无需接入SDK即可在Unity中获取经纬度(Android/iOS),告诉我你的坐标
2019-04-27
Unity获取系统信息SystemInfo(CPU、显卡、操作系统等信息)
2019-04-27
Unity中获取物体的尺寸(size)的三种方法
2021-06-30
Unity中的关节组件和绳子效果的实现
2021-06-30
Unity可视化编程插件: Bolt,可以像UE4的蓝图那样啦
2021-06-30
Android的.dex、.odex与.oat文件扫盲
2019-04-27
Unity移动应用如何在Bugly上查看崩溃堆栈
2019-04-27
一分钟搞明白Android的.so文件、ABI和CPU的关系
2019-04-27