简单多级菜单导航实现jq小插件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38147456/article/details/85759273

简单多级菜单导航实现js

简单多级菜单导航插件，觉得不实用的话可以联系我修改哦
js代码如下：

; (function ($, window, document, undefined) {
    $.fn.setMenu = function (options) {
        var defaults = {
            event: "click", //触发响应事件
            activeClass: 'on',//开启菜单加的类名
            menuBox:'ul',
            menuList:'li'
        };
        var options = $.extend({}, defaults, options);
        var $this = $(this); //当然响应事件对象
        //功能代码部分
        //初始化
        $(this).find(options.menuBox).hide();
        //绑定事件
        $this.find(options.menuList).on(options.event, function (e) {
            if ($(this).hasClass(options.activeClass)) {
                $(this).removeClass(options.activeClass).children(options.menuBox).slideUp();
            } else {
                $(this).addClass(options.activeClass).children(options.menuBox).slideDown();
                $(this).siblings(options.menuList).removeClass(options.activeClass).find(options.menuBox).slideUp().find(options.menuList).removeClass(options.activeClass);
            }
            //阻止事件冒泡
            if (e && e.stopPropagation) {
                e.stopPropagation();
            } else {
                window.event.cancelBubble = true;
            }
        });
    }
})(jQuery, window, document);
//调用
$(function(){
	$('#menu').setMenu();
})

很简单，感觉没什么好解释的，目前支持自定义：

event: "click", //触发响应事件
activeClass: 'on',//开启菜单加的类名
menuBox:'ul',//每级菜单盒子
menuList:'li'//每行菜单

我的css：css自己写哈，我给个参考，每级可以设不同的类名，设不同的样式，打开的菜单可以加on类名或者自定义的activeClass设置。

* {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
li {
    position: relative;
    padding-left: 20px;
}
li:before {
    content: '>';
    transition: all .3s;
    display: inline-block;
}
li.on:before {
    transform: rotate(90deg);
}
        #menu>.on{
            background: #eee;
        }
        .sec-menu>.on{
            background: #ddd;
        }
        .third-menu>.on{
            background: #ddd;
        }

html:

<ul id="menu">
        <li>
            一级菜单1
            <ul class="sec-menu">
                <li>二级菜单1
                    <ul class="third-menu">
                        <li>三级菜单1
                            <ul>
                                <li>4级菜单1</li>
                                <li>4级菜单1</li>
                                <li>4级菜单1</li>
                                <li>4级菜单1</li>
                                <li>4级菜单1</li>
                            </ul>
                        </li>
                        <li>三级菜单2</li>
                        <li>三级菜单3</li>
                        <li>三级菜单4</li>
                        <li>三级菜单5</li>
                    </ul>
                </li>
                <li>二级菜单2
                    <ul class="third-menu">
                        <li>三级菜单1</li>
                        <li>三级菜单2</li>
                        <li>三级菜单3</li>
                        <li>三级菜单4</li>
                        <li>三级菜单5</li>
                    </ul>
                </li>
                <li>二级菜单3
                    <ul class="third-menu">
                        <li>三级菜单1</li>
                        <li>三级菜单2</li>
                        <li>三级菜单3</li>
                        <li>三级菜单4</li>
                        <li>三级菜单5</li>
                    </ul>
                </li>
                <li>二级菜单4</li>
                <li>二级菜单5</li>
            </ul>
        </li>
        <li>
            一级菜单2
            <ul class="sec-menu">
                <li>二级菜单1
                    <ul class="third-menu">
                        <li>三级菜单1</li>
                        <li>三级菜单2</li>
                        <li>三级菜单3</li>
                        <li>三级菜单4</li>
                        <li>三级菜单5</li>
                    </ul>
                </li>
                <li>二级菜单2
                    <ul class="third-menu">
                        <li>三级菜单1</li>
                        <li>三级菜单2</li>
                        <li>三级菜单3</li>
                        <li>三级菜单4</li>
                        <li>三级菜单5</li>
                    </ul>
                </li>
                <li>二级菜单3
                    <ul class="third-menu">
                        <li>三级菜单1</li>
                        <li>三级菜单2</li>
                        <li>三级菜单3</li>
                        <li>三级菜单4</li>
                        <li>三级菜单5</li>
                    </ul>
                </li>
                <li>二级菜单4</li>
                <li>二级菜单5</li>
            </ul>
        </li>
        <li>
            一级菜单3
            <ul class="sec-menu">
                <li>二级菜单1
                    <ul class="third-menu">
                        <li>三级菜单1</li>
                        <li>三级菜单2</li>
                        <li>三级菜单3</li>
                        <li>三级菜单4</li>
                        <li>三级菜单5</li>
                    </ul>
                </li>
                <li class="sec-menu">二级菜单2
                    <ul class="third-menu">
                        <li>三级菜单1</li>
                        <li>三级菜单2</li>
                        <li>三级菜单3</li>
                        <li>三级菜单4</li>
                        <li>三级菜单5</li>
                    </ul>
                </li>
                <li class="sec-menu">二级菜单3
                    <ul class="third-menu">
                        <li>三级菜单1</li>
                        <li>三级菜单2</li>
                        <li>三级菜单3</li>
                        <li>三级菜单4</li>
                        <li>三级菜单5</li>
                    </ul>
                </li>
                <li>二级菜单4</li>
                <li>二级菜单5</li>
            </ul>
        </li>
        <li>一级菜单4</li>
        <li>一级菜单5</li>
    </ul>

最后，记得引jq噢。