本文主要详细介绍jQuery下拉菜单的滑动效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
当我们制作网页时，我们有时希望有一个又酷又流畅的下拉菜单。虽然我们用最基本的css和js就能做到，但是用jQuery只需要很短的代码就能完成下面的效果。
是不是很流畅？将鼠标移动到目标上的自动下拉菜单中，只需要两行代码：
$(' ').hover(function() {
$(这个)。孩子(“”)。slide toggle()；
});
其中hover是鼠标经过和离开的复合写法，一般是这样写的。
$(' ').hover(function() {
$(这个)。孩子(“”)。slide down()；
}，function() {
$(这个)。孩子(“”)。slide up()；
});
也就是说，在hover中写两个函数，一个是鼠标经过，一个是鼠标离开，两者之间用逗号隔开。但是，可以看出，上面我的代码只写了一个函数。这是因为如果我们只在hover中编写一个函数，那么当鼠标经过或离开时，这种效果会重复出现，这样更容易编写。
把它放在整体代码里，这样用：
！文档类型html
头
meta charset='UTF-8 '
风格
* {
边距：0；
填充：0；
}
李{
list-style-type:无；
}
一个{
文字-装饰：无；
字体大小：20px
}。导航{
边距：100px
}。navli {
位置：相对；
浮动：左；
宽度：80px
高度：50px
文本对齐：居中；
}。阿利导航
显示：块；
宽度：100%；
身高：100%；
行高：50px
颜色：黑色；
边框：1px纯色天蓝色；
}。悬停{
背景色：粉色；
}。导航ul {
显示：无；
位置：绝对；
顶配：50px
左：0；
宽度：100%；
border-left:1px solid # FECC5B；
border-right:1px solid # FECC5B；
}。导航ul li {
border-bottom:1px solid # FECC5B；
}。阿利导航：盘旋{
背景色：# fff 5 da；
}
/风格
script src=' https://code . jquery . com/jquery-3 . 5 . 1 . min . js '/script
/头
身体
ul class='nav '
里
A href='# '消息/a
保险商实验所
里
A href=' '跟随/a
/李
里
A href=' '注释/a
/李
里
A href=' '喜欢/a
/李
/ul
/李
里
A href='# '消息/a
保险商实验所
里
A href=' '跟随/a
/李
里
A href=' '注释/a
/李
里
A href=' '喜欢/a
/李
/ul
/李
里
A href='# '消息/a
保险商实验所
里
A href=' '跟随/a
/李
里
A href=' '注释/a
/李
里
A href=' '喜欢/a
/李
/ul
/李
/ul
脚本
$(function() {
$('.nav Li’)。hover(function() {
$(这个)。儿童(' ul ')。slide toggle()；
});
})
/脚本
/body
/html
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。