不得不重刷的二级菜单

最新推荐文章于 2024-07-12 22:54:26 发布

anyan2391

最新推荐文章于 2024-07-12 22:54:26 发布

阅读量88

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangrong-0823/p/11528483.html

版权

之前有看过视频写过二级菜单，也跟着写了，用啦，然而今天到用时就脑子短路拉，所以今天要记录一下。

本来我想达到的效果是这样的：

但是我还没有完成这项任务，估计是经验不足或是不懂，但是有实现了鼠标移入移出的事件。一开始就是慢慢从第一步他要有个鼠标移入的事件，然后这个事件就出现了一些相关的内容，等鼠标移出又是需要一个鼠标移出的事件，然后内容就收起来。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script>
			$().ready(function(){
				$(".lo").mouseenter(function(){
					var index=$('.lo').index(this);
					console.log(index);
					$('li').children().eq(index).css("display","block");
				});
				$(".lo").mouseleave(function(){
					var index=$('.lo').index(this);
//					console.log(index);
					$('li').children().eq(index).css("display","none");
				});
			});
		</script>
	</head>
	<body>
		<div>
			<ul>
				<li class="lo">新鲜肉类
					
						<div style="display: none;">
							<ol >
								<!--<span>猪肉</span>-->
								<li>猪肉</li>
								<li>牛肉</li>
								<li>羊肉</li>
								<li>鸡肉</li>
								<li>鸭肉</li>
								<li>鹅肉</li>
							</ol>
						</div>
					
				</li>
				<li class="lo">新鲜水果
					
						<div style="display: none;">
							<ol >
								<!--<span>猪肉</span>-->
								<li>猪肉</li>
								<li>牛肉</li>
								<li>羊肉</li>
								<li>鸡肉</li>
								<li>鸭肉</li>
								<li>鹅肉</li>
							</ol>
						</div>
					
				</li>
				<li class="lo">冷冻饮食
					
						<div style="display: none;">
							<ol >
								<!--<span>猪肉</span>-->
								<li>猪肉</li>
								<li>牛肉</li>
								<li>羊肉</li>
								<li>鸡肉</li>
								<li>鸭肉</li>
								<li>鹅肉</li>
							</ol>
						</div>
					
				</li>
				<li class="lo">海鲜水厂
					
						<div style="display: none;">
							<ol >
								<!--<span>猪肉</span>-->
								<li>猪肉</li>
								<li>牛肉</li>
								<li>羊肉</li>
								<li>鸡肉</li>
								<li>鸭肉</li>
								<li>鹅肉</li>
							</ol>
						</div>
				
				</li>
			</ul>
		</div>
	</body>
</html>

　　效果肯定不如人家的好，以下是我目前实现的：

下次我要实现下，这个只是个小例子，用来辅助我做项目的，原理是一样的，只是中间会有一些小细节需要注意。

（这里补充下之前学习的一个细节：就是用<i>标签的时候，给他设置背景图片的时候，需要把他的行内元素换成块级元素，要不然不给显示出来背景图片。）

转载于:https://www.cnblogs.com/wangrong-0823/p/11528483.html

anyan2391

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
不得不重刷的二级菜单

之前有看过视频写过二级菜单，也跟着写了，用啦，然而今天到用时就脑子短路拉，所以今天要记录一下。本来我想达到的效果是这样的：但是我还没有完成这项任务，估计是经验不足或是不懂，但是有实现了鼠标移入移出的事件。一开始就是慢慢从第一步他要有个鼠标移入的事件，然后这个事件就出现了一些相关的内容，等鼠标移出又是需要一个鼠标移出的事件，然后内容就收起来。<!DOC...
复制链接

扫一扫