Metronic5.1导航菜单状态在切换页面时的适时调整

Posted 2020-10-26 葛卫军

无论是Metronic5.1、gentelella、admilte等等bootstrap框架中左侧菜单，如果是静态页面，那么菜单状态都是设置好的。以下以Metronic5.1为例：

<li class="m-menu__item  m-menu__item--submenu m-menu__item--open m-menu__item--expanded" aria-haspopup="true"  data-menu-submenu-toggle="hover">
                                <a  href="#" class="m-menu__link m-menu__toggle">
                                    <i class="m-menu__link-icon flaticon-placeholder-1"></i>
                                    <span class="m-menu__link-text">
                                        Maps
                                    </span>
                                    <i class="m-menu__ver-arrow la la-angle-right"></i>
                                </a>
                                <div class="m-menu__submenu ">
                                    <span class="m-menu__arrow"></span>
                                    <ul class="m-menu__subnav">
                                        <li class="m-menu__item  m-menu__item--parent" aria-haspopup="true" >
                                            <span class="m-menu__link">
                                                <span class="m-menu__link-text">
                                                    Maps
                                                </span>
                                            </span>
                                        </li>
                                        <li class="m-menu__item  m-menu__item--active" aria-haspopup="true" >
                                            <a  href="../../components/maps/google-maps.html" class="m-menu__link ">
                                                <i class="m-menu__link-bullet m-menu__link-bullet--dot">
                                                    <span></span>
                                                </i>
                                                <span class="m-menu__link-text">
                                                    Google Maps
                                                </span>
                                            </a>
                                        </li>
                                        <li class="m-menu__item " aria-haspopup="true" >
                                            <a  href="../../components/maps/jqvmap.html" class="m-menu__link ">
                                                <i class="m-menu__link-bullet m-menu__link-bullet--dot">
                                                    <span></span>
                                                </i>
                                                <span class="m-menu__link-text">
                                                    JQVMap
                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>

m-menu__item  m-menu__item--submenu m-menu__item--open m-menu__item--expanded是菜单分组，

m-menu__item  m-menu__item--active呢是当前选中的菜单项。
那么如何在切换页面的时候让下一个页面的导航菜单分组实现m-menu__item--open m-menu__item--expanded并且当前选中的菜单项实现m-menu__item--active就是要解决的问题：

var CURRENT_URL = window.location.pathname.split(‘#‘)[0].split(‘?‘)[0];
            $("#m_ver_menu").find(‘a[href="‘ + CURRENT_URL + ‘"]‘).parent(‘li‘).parents(‘li‘).eq(0).addClass(‘m-menu__item--open‘).addClass(‘m-menu__item--expanded‘);
            $("#m_ver_menu").find(‘a[href="‘ + CURRENT_URL + ‘"]‘).parent(‘li‘).addClass(‘m-menu__item--active‘);

使用window.location.pathname而不使用window.location.href，是因为window.location.href的返回值带有"http://..."等内容。
仅此记录。