jQuery树状导航栏多级菜单

效果预览图
效果预览图

点击任一菜单，会自动关闭其它打开的菜单。
效果如上⤴️
代码如下⤵️
html 文件：

<!--包裹层-->
        <div class="navMenuBox">
            <!--一级菜单-->
            <ul class="navMenu">
                <!--菜单项-->
                <li>
                    <!--arrow类给具有下级菜单项添加箭头图标-->
                    <a href="#" class="arrow">已完成</a>
                    <!--子菜单-->
                    <ul class="subMenu">
                        <li><a href="#">已完成任务一</a></li>
                        <li><a href="#">已完成任务二</a></li>
                        <li><a href="#">已完成任务三</a></li>
                        <li><a href="#">已完成任务四</a></li>
                        <li>
                            <a href="#" class="arrow">我的任务</a>
                            <!--子菜单-->
                            <ul class="subMenu">
                                <li><a href="#">任务一</a></li>
                                <li><a href="#">任务二</a></li>
                                <li><a href="#">任务三</a></li>
                                <li><a href="#">任务四</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Bug</a></li>
                <li>
                    <a href="#" class="arrow">新增功能</a>
                    <!--子菜单-->
                    <ul class="subMenu">
                        <li><a href="#">功能一</a></li>
                        <li><a href="#">功能二</a></li>
                        <li><a href="#">功能三</a></li>
                        <li><a href="#">功能四</a></li>
                    </ul>
                </li>
            </ul>
            </ul>
        </div>

css文件：

.navMenuBox {
                background-color: #1c2229;
                overflow: auto;
            }

            /*去掉默认样式*/
            .navMenuBox ul,
            .navMenuBox li {
                list-style: none;
                padding: 0px;
                margin: 0px;
            }

            .navMenu>li>a {
                display: block;
                line-height: 40px;
                font-size: 17px;
                text-decoration: none;
                color: #ABB1B7;
                border-top: 1px solid #222932;
                border-bottom: 2px solid #191e24;
            }

            .navMenu>li.active>a,
            .navMenu>li>a:hover,
            .subMenu>li.active>a,
            .subMenu>li>a:hover {
                color: #FFF;
                background: #12181b;
            }

            .subMenu>li>a {
                display: block;
                line-height: 36px;
                font-size: 16px;
                text-decoration: none;
                color: #ABB1B7;
            }

            ul.subMenu {
                margin-top: 8px;
                margin-left: 10px;
                padding-bottom: 5px;
            }

            .subMenu>li>a {
                padding-left: 20px;
            }

            a.arrow:after {
                display: block;
                float: right;
                margin-right: 15px;
                font-size: 16px;
                line-height: 40px;
                font-family: FontAwesome;
                content: "\f105";
                font-weight: 300;
                text-shadow: none;
            }

            li.active>a.arrow:after {
                display: block;
                float: right;
                margin-right: 15px;
                font-size: 16px;
                line-height: 40px;
                font-family: FontAwesome;
                content: "\f107";
                font-weight: 300;
                text-shadow: none;
            }

            .navMenu>li>a:before {
                display: block;
                float: left;
                margin: 0 5px;
                font-size: 20px;
                line-height: 40px;
                font-family: FontAwesome;
                content: "\f0ac";
                font-weight: 300;
                text-shadow: none;
            }

js文件（记得引入jQuery）：

$(function() {
            //初始化
            $('.subMenu').hide();
            $('li.active>.subMenu').show();

            //给菜单项添加事件
            $('.navMenu a').click(function() {
                //获取所属列表ul
                var $subMenuElement = $(this).next();
                var $liElement = $(this).parent();
                var $ulElement = $(this).parent().parent();
                //没有子菜单，则直接返回
                if (!$subMenuElement.is('ul')) {
                    $ulElement.find('li').removeClass('active');
                    $ulElement.find('ul.subMenu').slideUp();
                    $liElement.addClass('active');
                    return;
                }
                //如果存在子菜单，则打开或者关闭
                if (!$liElement.hasClass('active')) {
                    $ulElement.find('li').removeClass('active');
                    $ulElement.find('ul.subMenu').slideUp();
                    $liElement.addClass('active');
                    $subMenuElement.slideDown();
                } else {
                    //打开状态 则关闭本菜单
                    $subMenuElement.slideUp();
                    $liElement.removeClass('active');

                }
            });
        });