不得不重刷的二级菜单
之前有看过视频写过二级菜单，也跟着写了，用啦，然而今天到用时就脑子短路拉，所以今天要记录一下。
本来我想达到的效果是这样的：
但是我还没有完成这项任务，估计是经验不足或是不懂，但是有实现了鼠标移入移出的事件。一开始就是慢慢从第一步他要有个鼠标移入的事件，然后这个事件就出现了一些相关的内容，等鼠标移出又是需要一个鼠标移出的事件，然后内容就收起来。
<!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>标签的时候，给他设置背景图片的时候，需要把他的行内元素换成块级元素，要不然不给显示出来背景图片。）
浙公网安备 33010602011771号