jQuery导航栏下拉菜单的显示/隐藏和有关动画的方法

最新推荐文章于 2024-05-06 21:09:29 发布

风向北吹i

最新推荐文章于 2024-05-06 21:09:29 发布

阅读量3.4k

点赞数 4

文章标签： jquery html5 javascript

本文链接：https://blog.csdn.net/qq_40576178/article/details/110090464

版权

jQuery中将导航栏下拉菜单进行简单的显示和隐藏处理

有下面几组相对应的方法

1、普通效果（子菜单有点生硬）

	show()		显示下拉子菜单 
	hide()		隐藏下拉子菜单
	toggle()	智能切换显示/隐藏（自动识别并切换下拉子菜单的显隐状态）

2、滑动效果（子菜单带有动画效果）

	slideDown()	   下拉显示子菜单
	slideUp()	   收起隐藏子菜单
	slideToggle()  智能切换显示/隐藏（自动识别并切换下拉子菜单的显隐状态）

HTML结构（导航栏demo）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="menu.css">
    <script src="jquery-3.3.1.js"></script>
    <script src="menu.js"></script>
</head>
<body>
<ul>
    <li>
        <a href="#">顶级菜单一</a>
        <ul>
            <li>子菜单11</li>
            <li>子菜单12</li>
            <li>子菜单13</li>
        </ul>
    </li>
    <li>
        <a href="#">顶级菜单二</a>
        <ul>
            <li>子菜单21</li>
            <li>子菜单22</li>
            <li>子菜单23</li>
        </ul>
    </li>
    <li>
        <a href="#">顶级菜单三</a>
        <ul>
            <li>子菜单31</li>
            <li>子菜单32</li>
            <li>子菜单33</li>
        </ul>
    </li>
</ul>
</body>
</html>

CSS样式

*{
    margin:0;
    padding:0;
    border:0 none;
}
ul,li{
    list-style: none; /*去掉li前面的点*/
}
/*完成顶级菜单*/
a{
    display: block;
    width:110px;
    height:30px;
    text-decoration: none; /*去掉下划线*/
    background-color: #263238;
    color:#FFF;
    line-height: 30px;
}
/*子菜单效果*/
ul li ul li{
    width:110px;
    height:30px;
    background-color: #ddd;
    color:#263238;
    line-height: 30px;
}
/*开始的时候，所有的子菜单隐藏*/
ul ul{
    display: none;
}

js文件

//menu.js代码
$(function(){
    $('a').click(function(){
        $(this).next().slideToggle(1000);
    })
})

必须引入jQuery文件（本篇引入的是jquery-3.3.1.js）

$(this)事件源

next()表示下一个兄弟元素

3、淡入淡出效果（子菜单显示/隐藏带有透明度）

	fadeIn()	  淡入效果
	fadeOut()	  淡出效果
	fadeToggle()  切换淡入/淡出效果
	fadeTo()	  修改元素的透明度[

fadeTo链接地址

4、自定义动画效果

	在多长时间后，实现什么样的动画效果
	$('div').animate( { 要操作的代码 }, 时间 ) 
	时间：毫秒 1000=1秒

5、延迟、停止动画

	delay()	延迟动画
	stop()	停止正在执行的动画（继续执行后面的动画）
	stop(true)	停止所有的动画

风向北吹i

关注

4
点赞
踩
24

收藏

觉得还不错? 一键收藏
1
评论
jQuery导航栏下拉菜单的显示/隐藏和有关动画的方法

jQuery中导航栏下拉的显示和隐藏有下面几组相对应的方法1、普通效果（子菜单有点生硬） show() 显示下拉子菜单 hide() 隐藏下拉子菜单 toggle() 智能切换显示/隐藏（自动识别并切换下拉子菜单的显隐状态）2、滑动效果（子菜单带有动画效果） slideDown() 下拉显示子菜单 slideUp() 收起隐藏子菜单 slideToggle() 智能切换显示/隐藏（自动识别并切换下拉子菜单的显隐状态）3、淡入淡出效果（子菜单显示/隐藏带有透明度）
复制链接

扫一扫