jquery一个简单的菜单小插件

刚学会封装插件，先来封装一个小的菜单插件

html部分

   <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();