jQuery学习:导航栏的触碰显示

最新推荐文章于 2023-03-14 16:02:59 发布

¡Venceremo

最新推荐文章于 2023-03-14 16:02:59 发布

阅读量176

点赞数

分类专栏： jquery 文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127856726

版权

jquery 专栏收录该内容

56 篇文章 1 订阅

订阅专栏

这段代码展示了如何使用JavaScript和CSS实现网页导航菜单的交互效果。当鼠标悬停在菜单项上时，子菜单会通过stop()方法停止当前动画并滑下显示；离开时则滑上隐藏。此实现避免了不停切换导致的其他子菜单隐藏问题，提高了用户体验。

摘要由CSDN通过智能技术生成

防止不停切换干掉其他排队的添加了stop

				$(this).children('ul').stop().slideDown();

			$("#nav>ul>li>ul").css('display','none');//先全部收缩
			//找到收缩的元素
			$('#nav>ul>li:has(ul)').hover(function(){
				//触碰前
				//子元素 展开
				//为了将前面未完成的删除
				$(this).children('ul').stop().slideDown();
			},function(){
				//收缩
				$(this).children('ul').stop().slideUp()
			})

* {
				margin: 0;
				padding: 0;
			}

			a {
				display: block;
				width: 100px;
				text-decoration: none;
				background-color: #bfa;
				padding: 2px;


			}
			li {
				list-style-type: none;
				/* 清除li前面的符号 */
			}

			#nav ul li {
				float: left;
				text-align: center;
				margin: 5px;

			}

			#nav ul li ul li {
				float: none;
				margin: 0px;
			
				border-top: 1px solid #000;
			
			}

			#nav {
				float: left;
				
				padding: 5px;
				height: 40px;
				background: #000;
				

			}

<div id="nav">
			<ul>
				<li><a href="#">首页</a></li>
				<li>
					<a href="#">衬衫</a>
					<ul>
						<li><a href="#">短袖的</a></li>
						<li><a href="#">长袖的</a></li>
						<li><a href="#">无袖的</a></li>
					</ul>
				</li>
				<li><a href="#">裙子</a>
					<ul>
						<li><a href="#">连衣裙</a></li>
						<li><a href="#">半身的</a></li>
					</ul>
				</li>
				<li><a href="#">联系我们</a></li>
			</ul>
		</div>