如何将活动链接添加到Bootstrap 4垂直菜单

Question

我正在尝试将active类添加到我的bootstrap 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

如果$(this).find(sublink).addClass('active');具有子菜单，则需要在$.each({})循环内进行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 -->

next