在 Bootstrap（AdminLTE）的下拉侧边菜单上显示活动菜单

Question

我希望在侧边栏菜单中突出显示活动页面。 我正在使用Bootstrap (AdminLTE)。

我尝试了许多javascript方法，但都没有成功。请有人帮忙解决。下面是侧边栏菜单。

<ul class="sidebar-menu" >
  <li class=""><a href="/dashboard"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a> </li>
  <br>
  <li class="treeview">
    <a href=""> <i class="fa fa-cogs"></i> <span> Account Configuarion</span> <i class="fa fa-angle-left pull-right"></i> </a>
    <ul class="treeview-menu">
      <li class="treeview">
        <a href=""> <i class="fa fa-mobile fa-lg"></i> <span>M-PESA C2B</span> <i class="fa fa-angle-left pull-right"></i> </a>
        <ul class="treeview-menu">
          <li class=""><a href="/c2b"><i class="fa fa-arrow-circle-right"></i>C2B Settings</a></li>
          <li class=""><a href="/online-checkout"><i class="fa fa-arrow-circle-right"></i> Online CheckOut</a></li>
          <li class=""><a href="/stk-push"><i class="fa fa-arrow-circle-right"></i> STK Push</a></li>
        </ul>
      </li>
      <li class="treeview">
        <a href=""> <i class="fa fa-mobile fa-lg"></i> <span>M-PESA B2C</span> <i class="fa fa-angle-left pull-right"></i> </a>
        <ul class="treeview-menu">
          <li><a href="b2c-documentation"><i class="fa fa-arrow-circle-right"></i>  B2C Settings</a></li>
        </ul>
      </li>
      <li class="treeview">
        <a href=""> <i class="fa fa-send"></i> <span>SMS</span> <i class="fa fa-angle-left pull-right"></i> </a>
        <ul class="treeview-menu">
          <li class=""><a href="/sms-setting"><i class="fa fa-arrow-circle-right"></i>SMS Settings</a></li>
          <li class=""><a href="/subscription"><i class="fa fa-arrow-circle-right"></i>Subscription SMS Settings</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li class="treeview ">
    <a href="#"> <i class="fa fa-cogs"></i> <span>Account Info</span> <i class="fa fa-angle-left pull-right"></i> </a>
    <ul class="treeview-menu">
      <li class=""><a href="buy-units"><i class="fa fa-arrow-circle-right"></i> Buy Units</a></li>
      <li class=""><a href="/account-details"><i class="fa fa-arrow-circle-right"></i>Account Details</a></li>
      <li class=""><a href="/users"><i class="fa fa-arrow-circle-right"></i>Account Users</a></li>
    </ul>
  </li>
</ul>

我尝试使用这个javascript代码，但最终打开了所有的下拉菜单。虽然它确实突出显示了当前项，但我希望其他项保持关闭，只有活动项保持打开。

<script>
    $(document).ready(function() {
        var url = window.location; 
        var element = $('ul.sidebar-menu a').filter(function() {
        return this.href == url || url.href.indexOf(this.href) == 0; }).parent().addClass('active');
        if (element.is('li')) { 
             element.addClass('active').parent().parent('li').addClass('active')
         }
    });
    </script>

- Syntax101

Answer 1

/** 尝试这个 ** > 对于adminLTE中的侧边栏和树视图菜单，它将在被点击时添加active类，并删除任何先前的active类 /** 添加active类并删除以前点击的菜单 */

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

- sssanjaya

---

为.treeview-menu添加"menu-open"类和"active"类，例如：$('ul.treeview-menu a').filter(function() { return this.href == url; }).parentsUntil(".sidebar-menu > .treeview-menu").siblings().removeClass('active menu-open').end().addClass('active menu-open'); - Hardik Leuwa

这应该是正确的答案，完美地工作了！ - Pedro Joaquín

Answer 2

终于想通了！

我在下面包含了脚本；

<script>
 /** add active class and stay opened when selected */
var url = window.location;

// for sidebar menu entirely but not cover treeview
$('ul.sidebar-menu a').filter(function() {
   return this.href == url;
}).parent().addClass('active');

// for treeview
$('ul.treeview-menu a').filter(function() {
   return this.href == url;
}).parentsUntil(".sidebar-menu > .treeview-menu").addClass('active');
    </script>

然后在所有的 <ul class="treeview-menu"> 上包含了<a href="#"> </a>，我相信这样可以防止列表在未被点击时展开。

最终这样解决了一切问题。

- Syntax101

Answer 3

请查看以下解决方案：

<script type="text/javascript">
   $(document).ready(function(){
  var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
  $('.treeview-menu li').removeClass('active');
  $('[href$="'+url+'"]').parent().addClass("active");
  $('.treeview').removeClass('menu-open active');
  $('[href$="'+url+'"]').closest('li.treeview').addClass("menu-open active");
});
</script>

- Alex Mac

---

你好..我尝试过这个，但是子菜单没有打开。 - Syntax101

请检查我的更新答案，希望能对您有所帮助。 - Alex Mac

Answer 4

试试这个：v2.3.0。

    var url = window.location;

// for sidebar menu entirely but not cover treeview
        $('ul.sidebar-menu a').filter(function() {
            return this.href == url;
        }).parent().addClass('active');

// for treeview
        $('ul.treeview-menu a').filter(function() {
            return this.href == url;
        }).parentsUntil(".sidebar-menu > .treeview-menu").addClass('active');

- Nur Uddin

---

在顶层中，它的工作很好，但是在重定向之后，菜单不处于活动状态。 - an__snatcher

工作正常，只需将此代码放在您的页脚文件中即可。 - rahim.nagori

Answer 5

这是对GMK Hussain关于AdminLTE 3的回答的跟进。我遇到了他代码中的null问题和undefined问题（因为我有一些页面根本没有出现在导航链接中）。我会得到JS控制台错误。这是我正在使用的内容：

$(document).ready(function () {
var url = window.location;
const allLinks = document.querySelectorAll('.nav-item a');
    const currentLink = [...allLinks].filter(e => {
    return e.href == url;
    });

    //fix for "cannot read property 'style' of null" on windows.location urls not in the nav, indefined on edit/create pages with id number
    if (typeof currentLink[0] !== 'undefined') {
        if (currentLink[0].closest(".nav-treeview") !== null) {
            currentLink[0].classList.add("active");
            currentLink[0].closest(".nav-treeview").style.display = 'block';
            currentLink[0].closest(".has-treeview").classList.add("active");
            currentLink[0].closest(".has-treeview").classList.add("menu-open");
        }
    }

});

我还添加了：currentLink[0].closest(".has-treeview").classList.add("menu-open"); 这将使更高层级项目的折叠变得可能，如果没有它，您必须点击两次更高层级导航才能将其折叠关闭。

- TysonS

Answer 6

如果有人需要在Admin LTE 4上修复此问题，可以采用以下方法：

<script>
    /** add active class and stay opened when selected */
    var url = window.location;

    // for sidebar menu entirely but not cover treeview
    $('ul.nav-sidebar a').filter(function() {
        return this.href == url;
    }).addClass('active');

    // for treeview
    $('ul.nav-treeview a').filter(function() {
        return this.href == url;
    }).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');
</script>

- rtstorm

Answer 7

注意: 这段代码是为了新的AdminLTE 3开发，使用bootstrap 4

var url = window.location;
const allLinks = document.querySelectorAll('.nav-item a');
const currentLink = [...allLinks].filter(e => {
  return e.href == url;
});

currentLink[0].classList.add("active")
currentLink[0].closest(".nav-treeview").style.display="block";
currentLink[0].closest(".has-treeview").classList.add("active");

- GMKHussain

---

如果链接不是树形视图，则会出现错误TypeError: currentLink[0].closest(...)为null。 - Nasz Njoka Sr.

Answer 8

我不希望这个问题被其他答案污染，但是它们都没有适用于AdminLTE-3.0.1。所以我创建了一个更新的解决方案。下面是：

const url = window.location;
/*remove all active and menu open classes(collapse)*/
$('ul.nav-sidebar a').removeClass('active').parent().siblings().removeClass('menu-open');
/*find active element add active class ,if it is inside treeview element, expand its elements and select treeview*/
$('ul.nav-sidebar a').filter(function () {
    return this.href == url;
}).addClass('active').closest(".has-treeview").addClass('menu-open').find("> a").addClass('active');

- erhan355

Answer 9

Adminlte4

$(document).ready(function(){
    const url = window.location;

    $('ul.nav-sidebar a').filter(function() {
        return this.href == url;
    }).parent().addClass('active');

    $('ul.nav-treeview a').filter(function() {
        return this.href == url;
    }).parentsUntil(".sidebar-menu > .nav-treeview").addClass('menu-open');

    $('ul.nav-treeview a').filter(function() {
        return this.href == url;
    }).addClass('active');

    $('li.has-treeview a').filter(function() {
        return this.href == url;
    }).addClass('active');

    $('ul.nav-treeview a').filter(function() {
        return this.href == url;
    }).parentsUntil(".sidebar-menu > .nav-treeview").children(0).addClass('active');

});

- Jamir Peroba

---

这也适用于最新版本3.0.5，谢谢你的好答案。非常有效。 - c-sharp-and-swiftui-devni

Answer 10

没有使用 JQuery 的解决方案：

JS 代码：

function isActiveElement (route, device, domain, classAsked) {

  var pathName = window.location.pathname;
  var routeName = pathName.split("/")[1];
  var deviceName = pathName.split("/")[2];
  var domainName = pathName.split("/")[3];
  var className = ""

  if(route !== "" && routeName === route) {
    className = classAsked;
  }
  if(domain !== "" && domainName !== domain) {
    className = "";
  }
  if(device !== "" && deviceName !== device) {
    className = "";
  }

  return className;
}

HTML 代码：

<li className={"nav-item has-treeview " + isActiveElement(route, "", domain,  "menu-open")}>
        <a href="#" className={"nav-link " + isActiveElement(route, "", domain, "active")}>

- dnzbrkyrk