"INSPINIA" 管理主题上的活动侧边菜单

Question

我想使用 JavaScript 在侧边栏菜单上突出显示活动页面。我正在使用 INSPINIA 主题。

我试过使用 JavaScript，它在普通菜单上运行良好。但它不适用于子菜单。我想为子菜单显示 in class 而不是 active class。请检查我的代码并帮助我。

HTML

<nav class="navbar-default navbar-static-side" role="navigation">
   <div class="sidebar-collapse">
      <ul class="nav metismenu" id="side-menu">
         <li>
            <a href="dashboard.html"><i class="fa fa-th-large"></i><span class="nav-label">Dashboards</span></a>
         </li>
         <li>
            <a href="#"><i class="fa fa-building"></i><span class="nav-label">Company</span><span class="fa arrow"></span></a>
            <ul class="nav nav-second-level collapse">
               <li><a href="addcompany.html">Add Company</a></li>
               <li><a href="#">View Company</a></li>
            </ul>
         </li>
         <li>
            <a href="mailbox.html"><i class="fa fa-envelope"></i><span class="nav-label">Person</span><span class="fa arrow"></span></a>
            <ul class="nav nav-second-level collapse">
               <li><a href="addperson.html">Add Person</a></li>
               <li><a href="#">View Person</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

JavaScript

$(document).ready(function () {
    var url = window.location;
    // for sidebar menu but not for metismenu submenu
    $('ul.metismenu a').filter(function () {
        return this.href == url;
    }).parent().siblings().removeClass('active').end().addClass('active');
    // for metismenu which is like a submenu
    $('ul.nav-second-level a').filter(function () {
        return this.href == url;
    }).parentsUntil(".metismenu > .nav-second-level").siblings().removeClass('active').end().addClass('active');
});

预期输出

<li class="active">
   <a href="#"><i class="fa fa-building"></i><span class="nav-label">Company</span><span class="fa arrow"></span></a>
   <ul class="nav nav-second-level collapse in">
      <li><a href="addcompany.html">Add Company</a></li>
      <li><a href="#">View Company</a></li>
   </ul>
</li>

实际输出

<li class="active">
   <a href="#"><i class="fa fa-building"></i><span class="nav-label">Company</span><span class="fa arrow"></span></a>
   <ul class="nav nav-second-level collapse active">
      <li><a href="addcompany.html">Add Company</a></li>
      <li><a href="#">View Company</a></li>
   </ul>
</li>

Answer 1

我找到了答案。

$(function() {
    setNavigation();
});

function setNavigation() {
    var path = window.location.pathname;
    path = path[0] == '/' ? path.substr(1) : path; //it will remove the dash in the URL

    $("ul.metismenu a").each(function() {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('active');
        }
    });

    $("ul.metismenu .nav-second-level a").each(function() {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            $(this).parent().parent().closest('li').addClass('active');
            $(this).closest('ul').addClass('in');
        }
    });
}

Answer 2

您的功能不起作用。相反，使用这个：

$(function(){
    var current = location.pathname;

    $('ul.metismenu li a').each(function(){
        if($(this).attr('href').indexOf(current) !== -1){
            $(this).closest('li').addClass('active');
        }
    });

    $('ul.metismenu .nav-second-level a').each(function(){
        console.log($(this).attr('href').indexOf(current));
        if($(this).attr('href').indexOf(current) !== -1)  {
            $(this).parent().parent().closest('li').addClass('active');
            $(this).closest('ul').addClass('in');
        }
    });
});

Answer 3

acmsohail 的回答对我有帮助，但我发现一个问题，如果有两个以相同方式开头的网址，则扩展名最大的网址将显示两个选定的网址。然后我留下采用正确元素的代码。

 function setNavigation() {
    var path = location.href;
    var lstElem = [];
    var classIndex;
    path = path[0] == '/' ? path.substr(1) : path;

    $("ul.metismenu a").each(function (i,e) {
        var href = $(this).attr('href');
        if (path.substring(0, href.length)  === href) {

            lstElem.push({
                element : e,
                count : href.length
            })

        }
    });

    if(lstElem.length > 0)
    {
        //i get the element with max length
        classIndex = $(lstElem.reduce(function(prev, current) {
            return (prev.count > current.count) ? prev : current
        })["element"]);

        classIndex.closest('li').addClass('active');

        lstElem = [];            
    }

    $("ul.metismenu .nav-second-level a").each(function () {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            lstElem.push({
                element : e,
                count : href.length
            })
        }
    });

    if(lstElem.length > 0)
    {
        classIndex = $(lstElem.reduce(function(prev, current) {
            return (prev.count > current.count) ? prev : current
        })["element"]);

        classIndex.parent().parent().closest('li').addClass('active');
        classIndex.closest('ul').addClass('in');
    }
}

"INSPINIA" 管理主题上的活动侧边菜单

Active side menu on "INSPINIA" admin theme

javascript

jquery

inspinia