如何将活动链接添加到引导程序 4 垂直菜单

Question

我正在尝试将active 类添加到我的引导程序 4 菜单中，但只有没有 sub 的顶级项目正在工作。谁能帮我解决这个问题？

对于顶级菜单sl-menu-link 应该有类active

对于顶级has-sub 级别菜单sl-menu-link 和nav-link 在它们处于活动状态时应该具有active 类。

Fiddle

这是我的 HTML

<div class="sl-sideleft-menu">
    <a href="index.php" class="sl-menu-link">
      <div class="sl-menu-item">
        <i class="menu-item-icon icon ion-ios-home-outline tx-22"></i>
        <span class="menu-item-label">Dashboard</span>
      </div><!-- menu-item -->
    </a><!-- sl-menu-link -->

    <a href="#" class="sl-menu-link">
      <div class="sl-menu-item">
        <i class="menu-item-icon icon ion-ios-person-outline tx-20"></i>
        <span class="menu-item-label">Users</span>
        <i class="menu-item-arrow fa fa-angle-down"></i>
      </div><!-- menu-item -->
    </a><!-- sl-menu-link -->
    <ul class="sl-menu-sub nav flex-column">
      <li class="nav-item"><a href="add-user.php" class="nav-link">New User</a></li>
      <li class="nav-item"><a href="manage-user.php" class="nav-link">Manage User</a></li>
    </ul>
    <a href="#" class="sl-menu-link">
      <div class="sl-menu-item">
        <i class="menu-item-icon ion-ios-pie-outline tx-20"></i><i class="icon "></i>
        <span class="menu-item-label">Projects</span>
        <i class="menu-item-arrow fa fa-angle-down"></i>
      </div><!-- menu-item -->
    </a><!-- sl-menu-link -->
    <ul class="sl-menu-sub nav flex-column">
      <li class="nav-item"><a href="chart-morris.html" class="nav-link">New Project</a></li>
      <li class="nav-item"><a href="chart-flot.html" class="nav-link">Manage Project</a></li>
      <li class="nav-item"><a href="chart-chartjs.html" class="nav-link">Running Projects</a></li>
      <li class="nav-item"><a href="chart-rickshaw.html" class="nav-link">Ended Projects</a></li>
      <li class="nav-item"><a href="chart-sparkline.html" class="nav-link">Hold Projects</a></li>
      <li class="nav-item"><a href="chart-sparkline.html" class="nav-link">Project Category</a></li>
    </ul>
    <a href="#" class="sl-menu-link">
      <div class="sl-menu-item">
        <i class="menu-item-icon ion-ios-book-outline tx-20"></i>
        <span class="menu-item-label">Tasks</span>
        <i class="menu-item-arrow fa fa-angle-down"></i>
      </div><!-- menu-item -->
    </a><!-- sl-menu-link -->
    <ul class="sl-menu-sub nav flex-column">
      <li class="nav-item"><a href="chart-morris.html" class="nav-link">Your Task</a></li>
      <li class="nav-item"><a href="chart-flot.html" class="nav-link">All Project Task</a></li>
      <li class="nav-item"><a href="chart-chartjs.html" class="nav-link">Completed Task</a></li>
      <li class="nav-item"><a href="chart-sparkline.html" class="nav-link">Hold Task</a></li>
    </ul>
    <a href="#" class="sl-menu-link">
      <div class="sl-menu-item">
        <i class="menu-item-icon icon ion-ios-person-outline tx-20"></i>
        <span class="menu-item-label">Vendor</span>
        <i class="menu-item-arrow fa fa-angle-down"></i>
      </div><!-- menu-item -->
    </a><!-- sl-menu-link -->
    <ul class="sl-menu-sub nav flex-column">
      <li class="nav-item"><a href="add-new-user.php" class="nav-link">New Vendor</a></li>
      <li class="nav-item"><a href="manage-user.php" class="nav-link">Manage Vendor</a></li>
    </ul>

  </div>

将 jQuery 添加到我的菜单中

$(document).ready(function () {
      var links     = $('a.sl-menu-link');
      var sublink   = $('a.sl-menu-link>ul>li>a.nav-link');
      var checklink = $(links).hasClass('show-sub')

    $.each(links, function (key, va) {
        if (va.href == document.URL) {
            $(this).addClass('active');

            if (checklink) {
                $(this,sublink).addClass('active');
            }
        }
    });
});

Answer 1

如果有子菜单，您需要在$.each({}) 循环内执行$(this).find(sublink).addClass('active');。你的 sublink 应该像 var sublink = $('ul li a'); 因为你在循环 links 而你的 sublink 在里面 links 。

jQuery(document).ready(function () {
//=================================
$('.sl-menu-link').on('click', function(){
    var nextElem = $(this).next();
    var thisLink = $(this);

    if(nextElem.hasClass('sl-menu-sub')) {

      if(nextElem.is(':visible')) {
        thisLink.removeClass('show-sub');
        nextElem.slideUp();
      } else {
        $('.sl-menu-link').each(function(){
          $(this).removeClass('show-sub');
        });

        $('.sl-menu-sub').each(function(){
          $(this).slideUp();
        });

        thisLink.addClass('show-sub');
        thisLink.find('ul>li>a').addClass('active');
        nextElem.slideDown();
      }
      return false;
    }
  });
//======================================
    var links = $('a.sl-menu-link');
    var sublink = $('ul li a');
    $.each(links, function (key, va) {
        if (va.href == document.URL) {
            $(this).addClass('active');
            if ($(this).hasClass('show-sub')) {
				    $(this).find(sublink).addClass('active');
			}
        }
    });
});

.sl-menu-link {
  color: #495057;
  display: block;
  font-weight: 400;
  border-top: 1px solid #e9ecef;
  transition: all 0.2s ease-in-out;
}
.sl-menu-link:hover, .sl-menu-link:focus {
  color: #495057;
  background-color: #e9ecef;
}
.sl-menu-link:focus, .sl-menu-link:active {
  outline: none;
}
.sl-menu-link.show-sub {
  background-color: #D8DCE3;
  border-color: #D8DCE3;
  color: #495057;
}
.sl-menu-link.active {
  background-color: #5B93D3;
  border-color: #5B93D3;
  color: #fff;
}
.sl-menu-link.active + .sl-menu-link {
  border-color: transparent;
}

.sl-menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 15px;
  height: 40px;
}

.menu-item-icon {
  width: 18px;
  position: relative;
  top: 1px;
  transition: all 0.2s ease-in-out;
}

.menu-item-label {
  white-space: nowrap;
  margin-left: 10px;
  margin-right: auto;
}

.menu-item-label,
.menu-item-arrow {
  transition: all 0.2s ease-in-out;
}

.sl-menu-sub {
  padding: 1px 0;
  overflow: hidden;
  display: none;
}
.sl-menu-sub .nav-item + .nav-item {
  margin-top: 1px;
}
.sl-menu-sub .nav-link {
  font-size: 13px;
  color: #495057;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 43px;
  white-space: nowrap;
  position: relative;
  background-color: #f8f9fa;
  transition: all 0.2s ease-in-out;
}
.sl-menu-sub .nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background-color: #868e96;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.sl-menu-sub .nav-link:hover, .sl-menu-sub .nav-link:focus {
  color: #343a40;
  background-color: #e9ecef;
}
.sl-menu-sub .nav-link:hover::before, .sl-menu-sub .nav-link:focus::before {
  opacity: 1;
}
.sl-menu-sub .nav-link.active {
  color: #343a40;
  background-color: #e9ecef;
}
.sl-menu-sub .nav-link.active::before {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sl-sideleft-menu">
        <a href="" class="sl-menu-link">
          <div class="sl-menu-item">
            <i class="menu-item-icon icon ion-ios-home-outline tx-22"></i>
            <span class="menu-item-label">Dashboard</span>
          </div><!-- menu-item -->
        </a><!-- sl-menu-link -->

        <a href="#" class="sl-menu-link">
          <div class="sl-menu-item">
            <i class="menu-item-icon icon ion-ios-person-outline tx-20"></i>
            <span class="menu-item-label">Users</span>
            <i class="menu-item-arrow fa fa-angle-down"></i>
          </div><!-- menu-item -->
        </a><!-- sl-menu-link -->
        <ul class="sl-menu-sub nav flex-column">
          <li class="nav-item"><a href="" class="nav-link">New User</a></li>
          <li class="nav-item"><a href="" class="nav-link">Manage User</a></li>
        </ul>
		<a href="#" class="sl-menu-link">
          <div class="sl-menu-item">
            <i class="menu-item-icon ion-ios-pie-outline tx-20"></i><i class="icon "></i>
            <span class="menu-item-label">Projects</span>
            <i class="menu-item-arrow fa fa-angle-down"></i>
          </div><!-- menu-item -->
        </a><!-- sl-menu-link -->
        <ul class="sl-menu-sub nav flex-column">
          <li class="nav-item"><a href="" class="nav-link">New Project</a></li>
          <li class="nav-item"><a href="" class="nav-link">Manage Project</a></li>
          <li class="nav-item"><a href="" class="nav-link">Running Projects</a></li>
          <li class="nav-item"><a href="" class="nav-link">Ended Projects</a></li>
          <li class="nav-item"><a href="" class="nav-link">Hold Projects</a></li>
          <li class="nav-item"><a href="" class="nav-link">Project Category</a></li>
        </ul>
		<a href="#" class="sl-menu-link">
          <div class="sl-menu-item">
            <i class="menu-item-icon ion-ios-book-outline tx-20"></i>
            <span class="menu-item-label">Tasks</span>
            <i class="menu-item-arrow fa fa-angle-down"></i>
          </div><!-- menu-item -->
        </a><!-- sl-menu-link -->
        <ul class="sl-menu-sub nav flex-column">
          <li class="nav-item"><a href="" class="nav-link">Your Task</a></li>
          <li class="nav-item"><a href="" class="nav-link">All Project Task</a></li>
          <li class="nav-item"><a href="" class="nav-link">Completed Task</a></li>
          <li class="nav-item"><a href="" class="nav-link">Hold Task</a></li>
        </ul>
		<a href="#" class="sl-menu-link">
          <div class="sl-menu-item">
            <i class="menu-item-icon icon ion-ios-person-outline tx-20"></i>
            <span class="menu-item-label">Vendor</span>
            <i class="menu-item-arrow fa fa-angle-down"></i>
          </div><!-- menu-item -->
        </a><!-- sl-menu-link -->
        <ul class="sl-menu-sub nav flex-column">
          <li class="nav-item"><a href="" class="nav-link">New Vendor</a></li>
          <li class="nav-item"><a href="" class="nav-link">Manage Vendor</a></li>
        </ul>
		
      </div><!-- sl-sideleft-menu -->