JQ 下拉菜单(无限级)

最新推荐文章于 2021-08-06 07:20:06 发布

iteye_17658

最新推荐文章于 2021-08-06 07:20:06 发布

阅读量183

点赞数 1

分类专栏：阅-JQ2 文章标签： javascript ViewUI

阅-JQ2 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单(无限级)</title>
<style>
*{
	padding: 0;
	margin: 0;
}
li{
	list-style-type: none;
}
body{
	margin: 50px;
}
.hide{
	display: none;
}

.menu{
	cursor: pointer;
}
</style>
</head>
<body>
<ul>
	<li class="menu" style="float: left;">
		<span>一级菜单</span>
		<ul class="hide">
			<li class="menu">
				<span>二级菜单</span>
				<ul class="hide">
					<li class="menu">
						<span>三级菜单</span>
						<ul class="hide">
							<li class="menu">
								<span>四级菜单</span>
								<ul class="hide">
									<li class="menu"><span>五级菜单</span></li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	<li class="menu" style="float: left;">
		<span>一级菜单</span>
		<ul class="hide">
			<li class="menu">
				<span>二级菜单</span>
				<ul class="hide">
					<li class="menu">
						<span>三级菜单</span>
						<ul class="hide">
							<li class="menu">
								<span>四级菜单</span>
								<ul class="hide">
									<li class="menu"><span>五级菜单</span></li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
<script src="jquery.js"></script>
<script>
$(function(){
	var menu = $('.menu');
	menu.hover(function(){
		$(this).children('ul').show();
	},function(){
		$(this).children('ul').hide();
	});
});
</script>
</body>
</html>

效果图：

iteye_17658

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQ 下拉菜单(无限级)

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;下拉菜单(无限级)&lt;/title&gt;&lt;style&gt;*{ padding: 0; margin: 0;}l
复制链接

扫一扫

专栏目录