如何用jQuery实现下拉菜单

最新推荐文章于 2025-05-16 16:56:34 发布

原创最新推荐文章于 2025-05-16 16:56:34 发布 · 4.2k 阅读

14 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和jQuery实现的侧边栏菜单动态显示效果。当用户点击菜单项时，子菜单会以滑动动画的形式展开或收起，增强了用户体验。通过巧妙的CSS样式设置和jQuery事件处理，实现了菜单的交互性和美观性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码部分

布局

<body>
		<div class="box">
			<ul class="zong">
				<li class="one">
					<p>新闻中心</p>
					<ul class="three">
						<li>添加新闻</li>
						<li>添加新闻</li>
						<li>添加新闻</li>
						<li>添加新闻</li>
					</ul>
				</li>
				<li class="one">
					<p>关于我们</p>
					<ul class="three">
						<li>关于我们</li>
						<li>关于我们</li>
						<li>关于我们</li>
						<li>关于我们</li>
					</ul>	
				</li>
				<li class="one">
					<p>业务系统</p>
					<ul class="three">
						<li>业务系统</li>
						<li>业务系统</li>
						<li>业务系统</li>
						<li>业务系统</li>
					</ul>
					
				</li>
				<li class="one">
					<p>联系我们</p>
					<ul class="three">
						<li>联系我们</li>
						<li>联系我们</li>
						<li>联系我们</li>
						<li>联系我们</li>
					</ul>
					
				</li>
			</ul>
		</div>
	</body>

样式

<style>
			*{
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			div{
				width: 200px;
				margin: 0 auto;
				margin-top: 200px;
				border: 1px solid black;
				border-bottom: none;
				text-align: center;
			}
			.one{
				cursor: pointer;
				background-color: coral;
				border-bottom: 1px solid black;
			}
			.one:hover{
				background-color: red;
			}
			.two{
				cursor: pointer;
				background-color: coral;
				border-bottom: 1px solid black;
			}
			.two:hover{
				background-color: red;
			}
			.three{
				cursor: pointer;
				background-color: white;
				display: none;
				border-bottom: 1px solid black;
			}
			.one ul li:hover{
				background-color: yellow;
			}
			.two ul li:hover{
				background-color: yellow;
			}
		</style>

jQuery

$(function(){
		  $(".one").toggle(function(){      //toggle是两次点击事件，这里是第一次点击
			$(this).children("ul").slideDown("");   //slideDown()是向下滑出现的效果
			$(this).siblings().children("ul").slideUp("");    
		  },function(){                    //第二次点击
			$(this).children("ul").slideUp("");
		  });
		})

在这里插入图片描述