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

最新推荐文章于 2022-08-26 17:07:52 发布

原创最新推荐文章于 2022-08-26 17:07:52 发布 · 837 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#多级导航 #jq插件

前端专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一款基于jQuery的简单多级菜单导航插件，支持自定义触发事件、活动类名、菜单盒子和菜单列表。通过点击菜单项，可以展开或收起子菜单，并通过添加或移除特定类名来改变菜单状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单多级菜单导航实现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噢。