無論是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://..."等內容。
僅此記錄。

Metronic5.1導航菜單狀態在切換頁面時的適時調整