Js和jQuery的下拉菜单

最新推荐文章于 2023-10-06 22:18:06 发布

前端小菜鸟

最新推荐文章于 2023-10-06 22:18:06 发布

阅读量501

点赞数

分类专栏： JavaScript jQuery 文章标签： JavaScritp jquery

本文链接：https://blog.csdn.net/learninginJAVA/article/details/44871113

版权

JavaScript 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

jQuery

4 篇文章 0 订阅

订阅专栏

<span style="font-size:14px;"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三级下拉菜单</title>
	<link rel="stylesheet" href="three-level.css">
	<!-- <script>
		window.onload = function() {
			var Lis = document.getElementsByTagName("li");
			for(var i = 0; i < Lis.length; i++) {
				Lis[i].onmouseover = function () {
					var u = this. getElementsByTagName("ul")[0];
					if (u !== undefined) {
						u.style.display = "block";
					}
				}
				Lis[i].onmouseout = function () {
					var u = this. getElementsByTagName("ul")[0];
					if (u !== undefined) {
						u.style.display = "none";
					}
				}
			}		
		}
	</script> -->
	<script src="../../../jQuery/jquery-1.11.2.min.js"></script>
	//jQuery的包要单独在一个script里引入！
	<script>
		$(document).ready(function() {
			$("li")
			.mouseover(
			<span style="color:#ff0000;">//jQuery是事件，如ready!而Js里是事件处理所以是onmouesover</span>
				function() {
					$(this).children("ul").show();
				})
			.mouseout(
				function() {
					$(this).children("ul").hide();
				});
		});
	</script>
</head>
<body>
	<ul id="nav">
		<li><a href="#">首页</a></li>
		<li>
			<a href="#">
			课程大厅
			</a>
			<!-- <ul id="second-nav">
				<li>
					<a href="#">JavaScript</a>
				</li>
				<li>
					<a href="#">jQuery</a>
				</li>
			</ul> -->
		</li>
		<li>
			<a href="#">
			学习中心
			</a>
			<ul id="second-nav">
				<li>
					<a href="#">ios开发</a>
					<ul id="third-nav">
						<li>
							ios游戏开发
						</li>
						<li>
							ios软件开发
						</li>
					</ul>
				</li>
				<li>
					<a href="#">安卓开发</a>
				</li>
			</ul>
		</li>
		<li><a href="#">经典案例</a></li>
		<li><a href="#">关于我们</a></li>
	</div>
</body>
</html></span>

前端小菜鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js和jQuery的下拉菜单

三级下拉菜单 window.onload = function() { var Lis = document.getElementsByTagName("li"); for(var i = 0; i < Lis.length; i++) { Lis[i].onmouseover = function () { var u = this. getElemen
复制链接

扫一扫

专栏目录