zoukankan      html  css  js  c++  java
  • Metronic5.1导航菜单状态在切换页面时的适时调整

    无论是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://..."等内容。
    仅此记录。
  • 相关阅读:
    c++ 虚继承与继承的差异 (转)
    主题:PageRank解释
    (转)开源爬虫larbin分析
    Django随笔
    原生爬虫小Demo
    SVN
    Python的正则表达式与JSON
    类库 方法 模块等
    笔记
    自动补全Typeahead
  • 原文地址:https://www.cnblogs.com/gwjtssy/p/8537221.html
Copyright © 2011-2022 走看看