初步使用Jquery实现隐藏式菜单

最新推荐文章于 2022-10-11 10:49:25 发布

阿旺你好啊

最新推荐文章于 2022-10-11 10:49:25 发布

阅读量571

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_43803985/article/details/97369755

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

（1）引入jquery的文件
（2）代码解释：当鼠标单击含有level1的元素时，给其添加一个名为current的样式，然后将其紧邻后面的元素显示出来，同时将它的父辈元素内部的子元素a都去掉一个为current的class样式，并将紧邻它后面的元素都隐藏
（3）大致效果为
显示界面
点击效果
点击效果2

=<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.2.1.min.js">
		</script>
		<script>
			$(function(){
			 $(".level1 > a").click(function(){
				$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
			 }); 
		 })
		</script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				 text-decoration: none;
				list-style: none;
			}
				
			a{
			  text-decoration: none;
			}
			.current {
				display: block;
			}

			.level2 {
				display: none;
				text-indent: 2em;
			}
		</style>
	</head>
	<body style="width: 500px; margin: 0 auto;">
		<div class="box">
			<ul class="menu">
				<li class="level1">
					<a href="#none">衬衫</a>
					<ul class="level2">
						<li><a href="#none">短袖衬衫</a></li>
						<li><a href="#none">长袖衬衫</a></li>
						<li><a href="#none">短袖T恤</a></li>
					</ul>
				</li>
				<li class="level1">
					<a href="#none">卫衣</a>
					<ul class="level2">
						<li><a href="#none">短袖衬衫</a></li>
						<li><a href="#none">长袖衬衫</a></li>
						<li><a href="#none">短袖T恤</a></li>
					</ul>
				</li>

				<li class="level1">
					<a href="#none">裤子</a>
					<ul class="level2">
						<li><a href="#none">短袖衬衫</a></li>
						<li><a href="#none">长袖衬衫</a></li>
						<li><a href="#none">短袖T恤</a></li>
					</ul>
				</li>

			</ul>
		</div>
	</body>
</html>

阿旺你好啊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初步使用Jquery实现隐藏式菜单

（1）引入jquery的文件（2）代码解释：当鼠标单击含有level1的元素时，给其添加一个名为current的样式，然后将其紧邻后面的元素显示出来，同时将它的父辈元素内部的子元素a都去掉一个为current的class样式，并将紧邻它后面的元素都隐藏（3）大致效果为=<!DOCTYPE html><html> <head> <meta...
复制链接

扫一扫

专栏目录