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

2uluyalo 于 2022-12-18 发布在 jQuery

关注(0)|答案(4)|浏览(181)

错误|Help当我试图修改nav-link上的类时，jquery没有正确启动。可能是被其他js阻塞了？

我正在创建我的index.php文件，其中包括once 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版本：[例如，版本3.0.4]
操作系统：[例如微软 windows 10]
浏览器（版本）：[例如Chrome（最新）]

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

jquery

来源：https://stackoverflow.com/questions/61025311/adminlte-sidebar-active-menu-doesnt-change-dynamically

4条答案

按热度按时间

46qrfjad1#

$(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');
});

赞(0）回复(0）举报 2022-12-18

jpfvwuh42#

用于管理员LTE 3

如果要输入URL，例如：网址/编辑/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');

赞(0）回复(0）举报 2022-12-18

rqcrx0a63#

<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>

赞(0）回复(0）举报 2022-12-18

d6kp6zgx4#

var url = window.location;
var href = url.href;
let c = href.split("/").length - 3
var afterWithout = href.substr(0, href.lastIndexOf("/"));

if (c == 1) {
    $('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');
} else {
    $('ul.nav-sidebar a').filter(function() {
        return this.href == afterWithout;
    }).addClass('active');
    // for sidebar menu and treeview
    $('ul.nav-treeview a').filter(function() {
            return this.href == afterWithout;
        }).parentsUntil(".nav-sidebar > .nav-treeview")
        .css({
            'display': 'block'
        })
        .addClass('menu-open').prev('a')
        .addClass('active');
}

赞(0）回复(0）举报 2022-12-18

我来回答

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

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

4条答案

相关问题

热门标签

最新问答