刚学会封装插件,先来封装一个小的菜单插件
html部分
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<ul class="zong"> <li class="yiji"> <a href="#">公司信息</a> <ul class="fji"> <li>itme 1</li> <li>itme 1</li> <li>itme 1</li> <li>itme 1</li> </ul> </li> <li class="yiji"> <a href="#">公司简介</a> <ul class="fji"> <li>itme 1</li> <li>itme 2</li> <li>itme3</li> <li>itme 4</li> </ul> </li> <li class="yiji"> <a href="#">公司发展</a> <ul class="fji"> <li>itme 1</li> <li>itme 2</li> <li>itme3</li> <li>itme 4</li> </ul> </li> <li class="yiji"> <a href="#">公司发展</a> </li> </ul>
css 部分
.zong>li{ float: left; margin: 20px 10px auto auto; background-color: powderblue; width: 120px; text-align: center; height: 30px; line-height: 30px; } ul{ margin: 0; padding: 0; list-style: none; } a{ text-decoration: none;color: #000000} .zong>li>ul>li{ background-color: #ccc;} .zong>li>ul>li:hover{ margin: 1px; -webkit-transition:all 0.3s; } .fji{ display: none; }
js部分除了要引入的jquery文件之外引入自定义的menu.js
menu.js
$.fn.extend({ yidong:function(){ $(this).on({ "mouseenter":function(){ $(this).find("ul").css("display","block"); }, "mouseleave": function () { $(this).find("ul").css("display","none"); } }); } });
使用方式,在页面中直接调用yidong()方法
$(".yiji").yidong();