AdminLTE 侧边栏活动菜单不会动态更改

Question

错误 |帮助 当我尝试更改导航链接上的类时，jquery 无法正确启动。可能这已经被其他js屏蔽了？

我正在创建我的 index.php 文件，其中包含一次 header.php、sidebard.php 和 footer.php 使用从侧边栏菜单中选择的条件调用某些页面。当单击另一个项目并将“活动”添加到类时，我尝试更改活动的导航链接。但它只是没有启动。

这是我的sidebar.php

的内容

`

<!-- Sidebar -->
<div class="sidebar">
  <!-- Sidebar Menu -->
  <nav class="mt-2">
    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
      <!-- Add icons to the links using the .nav-icon class
           with font-awesome or any other icon font library -->
      <li class="nav-item">
        <a href="?page=home" class="nav-link">
          <i class="nav-icon fas fa-home"></i>
          <p>
            Home
          </p>
        </a>            
      </li>
      <li class="nav-item">
        <a href="?page=notification" class="nav-link" id="nav-link">
          <i class="nav-icon fas fa-info-square"></i>
          <p>
            Notification
          </p>
        </a>            
      </li>
      <li class="nav-item">
        <a href="?page=important" class="nav-link">
          <i class="nav-icon fas fa-calendar-alt"></i>
          <p>
            Important Dates
          </p>
        </a>            
      </li>
      <li class="nav-item">
        <a href="?page=eligibility" class="nav-link">
          <i class="nav-icon fas fa-badge-check"></i>
          <p>
            Eligibility
          </p>
        </a>            
      </li>
      <li class="nav-item">
        <a href="?page=feestructure" class="nav-link">
          <i class="nav-icon fas fa-money-check-alt"></i>
          <p>
            Fee Structure
          </p>
        </a>            
      </li>
      <li class="nav-item">
        <a href="?page=prospectus" class="nav-link">
          <i class="nav-icon fas fa-file-powerpoint"></i>
          <p>
            Prospectus
          </p>
        </a>            
      </li>
      <li class="nav-item">
        <a href="?page=apply" class="nav-link">
          <i class="nav-icon fas fa-user-plus"></i>
          <p>
            Apply Now
          </p>
        </a>            
      </li>
      <li class="nav-item">
        <a href="?page=notification" class="nav-link">
          <i class="nav-icon fas fa-user-lock"></i>
          <p>
            Applicant Login
          </p>
        </a>            
      </li>
      <li class="nav-item">
        <a href="/admin/" class="nav-link">
          <i class="nav-icon fas fa-user-shield"></i>
          <p>
            Admin Login
          </p>
        </a>            
      </li>          
    </ul>
  </nav>
  <nav class="mt-5">
    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
      <!-- Add icons to the links using the .nav-icon class
           with font-awesome or any other icon font library -->
      <li class="nav-item has-treeview menu-open">
        <a href="" class="nav-link active">
          <i class="nav-icon fas fa-question-circle"></i>
          <p>
           ADMISSION HELPLINE
            <i class="right fas fa-angle-left"></i>
          </p>
        </a>
        <ul class="nav nav-treeview">
          <li class="nav-item">
            <a class="nav-link active">
              <i class="far fa-empty"></i>
              <p><b>Principal Office</b><br>
              <b>Contact:</b> (9:30AM – 4:00PM) <br>+1 1234 567 890<br> <b>Email:</b> <br>someone@somewhere.com</p>
            </a>
          </li>              
        </ul>
      </li>
    </ul>
  </nav>
  <!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->

`

这是我的 footer.php，其中包含用于触发操作的 jquery。

<!-- script to change the selected active nav-link -->

<script>$(document).ready(function () { 
$('.nav-link').click(function(e) {
$('.nav-link').removeClass('active');        
$(this).addClass("active");

});
});
</script>

环境

• AdminLTE 版本：[例如v3.0.4]
• 操作系统：[例如微软视窗 10]
• 浏览器（版本）：[例如Chrome（最新）]

我错过了什么吗？请帮帮我。

Answer 1

$(function () {
    var url = window.location;
    // for single sidebar menu
    $('ul.nav-sidebar a').filter(function () {
        return this.href == url;
    }).addClass('active');

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

Answer 2

对于管理员 LTE 3
如果您想输入 url，例如：url/edit/3
此代码对我有用：

/*** 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() {
    if (this.href) {
        return this.href == url || url.href.indexOf(this.href) == 0;
    }
}).addClass('active');

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

Answer 3

<script>
  /** add active class and stay opened when selected */
  var url = window.location;
  const allLinks = document.querySelectorAll('.nav-item a');
  const currentLink = [...allLinks].filter(e => {
    return e.href == url;
  });

  if (currentLink.length > 0) { //this filter because some links are not from menu
      currentLink[0].classList.add("active");
      //currentLink[0].closest(".nav-treeview").style.display = "block";
      //currentLink[0].closest(".has-treeview").classList.add("active");
  }
</script>