jQuery——下拉菜单案例

原创

DanielMaster 2022-02-04 10:31:39 博主文章分类：前端 ©著作权

文章标签 jquery css 提示信息 ide 其他 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者DanielMaster的原创作品，请联系作者获取转载授权，否则将追究法律责任

用jQuery实现简单的下拉菜单
效果：
jQuery——下拉菜单案例_css
代码：

<html>
	<head>
		<title>下拉菜单案例</title>
		<meta charset="UTF-8" />
		<!--声明css-->
		<style type="text/css">
			/* 设置li的样式 */
			ul li {
				/* 让li没有标记 */
				list-style-type: none;
			}

			/* 设置菜单的位置 */
			#news {
				position: relative;
				left: 20px;
			}

			#shoes {
				position: relative;
				left: 20px;
			}

			/* 设置提示框样式 */
			#tips {
				position: absolute;
				z-index: 1;
				border: 1px solid #cccccc;
				background-color: #FFC;
				display: none;
				font-size: 14px;
			}

			.lightlabel {
				color: red;
				text-decoration: underline;
				cursor: pointer;
			}
		</style>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//页面显示
			$(function() {
				//取第一个ul中的第一个label
				$("ul:eq(0) label:eq(0)").bind("mouseover", function() {
					$("#news").slideDown(1000);
					$("#newsImg").attr("src", "img/open.gif");
				});
				$("ul:eq(0) label:eq(0)").bind("mouseout", function() {
					$("#newsImg").attr("src", "img/close.gif");
				});

				//取第二个ul中的第一个label
				$("ul:eq(1) label:eq(0)").bind("mouseover", function() {
					$("#shoes").slideDown(1000);
					$("#newsImg1").attr("src", "img/open.gif");
				});
				$("ul:eq(1) label:eq(0)").bind("mouseout", function() {
					$("#newsImg1").attr("src", "img/close.gif");
				});
			})

			//页面隐藏
			$(function() {
				// 点击时隐藏
				$("ul:eq(0) label:eq(0)").click(function() {
					$("#news").slideUp(1000);
					$("#newsImg").attr("src", "img/close.gif");
				});
				$("ul:eq(1) label:eq(0)").click(function() {
					$("#shoes").slideUp(1000);
					$("#newsImg1").attr("src", "img/close.gif");
				});
			})

			//排列
			$(function() {
				//实现横向排列
				$("#horder").click(function() {
					var li = $("ul>div>li");
					//设置li标签的css样式属性中的浮动属性,值为左浮动
					li.css("float", "left"); //设置
				});

				//实现纵向排列
				$("#vorder").click(function() {
					var li = $("ul li");
					//清除左浮动
					li.css("float", "none");
				});
			});

			$(function() {
				//鼠标移入时给出提示信息
				$("ul div li label").mouseover(function(event) {
					//获取label标签的文本值
					var txt = $(this).text();
					//获取用于信息的提示的元素对象，设置提示信息
					$("#tips").html("<b>点击查看【" + txt + "】信息</b>");
					//控制提示信息显示的位置  left  top
					$("#tips").css("left", event.pageX + 10);
					$("#tips").css("top", event.pageY + 5);
					//显示
					$("#tips").show();
					//为当前的label标签增加一个class样式
					$(this).addClass("lightlabel");
				});

				//鼠标移出时清空提示信息 
				$("ul div li label").mouseout(function() {
					//获取用于信息的提示的元素对象，清空提示信息
					$("#tips").html("");
					//设置提示信息的位置，归于原点 0 0
					$("#tips").css({
						left: "0",
						"top": "0"
					});
					//将提示的元素对象div隐藏
					$("#tips").hide();
					$(this).removeClass("lightlabel");
				});
			});
		</script>
	</head>
	<body>
		<h3>jQuery-菜单案例</h3>
		<p>
			<input type="button" newsme="horder" id="horder" value="横向排列" />
			<input type="button" newsme="vorder" id="vorder" value="纵向排列" />
		</p>
		<hr />
		<ul>
			<img src="img/close.gif" id="newsImg" />&nbsp;&nbsp;<label for="">新闻频道</label>
			<div id="news" style="display: none;">
				<li><img src="img/item.gif" alt="" /><label for="">央视新闻</label></li>
				<li><img src="img/item.gif" alt="" /><label for="">焦点访谈</label></li>
			</div>
		</ul>
		<br /><br /><br /><br /><br /><br /><br /><br />
		<ul>
			<img src="img/close.gif" id="newsImg1" />&nbsp;&nbsp;<label for="">鞋类频道</label>
			<div id="shoes" style="display: none;">
				<li><img src="img/item.gif" alt="" /><label for="">篮球鞋</label></li>
				<li><img src="img/item.gif" alt="" /><label for="">跑鞋</label></li>
				<li><img src="img/item.gif" alt="" /><label for="">板鞋</label></li>
				<li><img src="img/item.gif" alt="" /><label for="">休闲鞋</label></li>
			</div>
		</ul>
		<div id="tips"></div>

	</body>
</html>