如何更改引导导航的类别？

Question

我有一个引导导航栏，其中 “添加新候选人” 是我作为 li 的导航选项。我想将其类从 "nav-item has-treeview" 更改为 "nav-item has-treeview menu-open" 当用户选择它并还将ul的类（即“添加新候选人”中的“一般信息”）更改为“nav-link active” .

我也尝试过这里提到的解决方案Bootstrap CSS Active Navigation

Navigation Bar image

Expected Outcome

$(document).ready(function(){
  $('.nav nav-pills nav-sidebar flex-column li').click(function(e) {
    var $this = $(this);
    if (!$this.hasClass('nav-item has-treeview')) {
      $this.addClass('nav-item has-treeview menu-open');
    }
    e.preventDefault();
  });
 
  $('.nav nav-pills nav-sidebar flex-column li a').click(function(e) {
    var $this = $(this);
    if (!$this.hasClass('nav-link')) {
      $this.addClass('nav-link active');
    }
    e.preventDefault();
  });

  $('.nav nav-treeview li a').click(function(e) {
    var $this = $(this);
    if (!$this.hasClass('nav-link')) {
      $this.addClass('nav-link active');
    }
    e.preventDefault();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item has-treeview">
<!-- <li class="nav-item has-treeview menu-open"> -->
    <a href="addnewCandidate" class="nav-link">
    <!-- <a href="addnewCandidate" class="nav-link active"> -->
        <i class="nav-icon fas fa-tachometer-alt"></i>
        <p>Add new Candidate <i class="right fas fa-angle-left"></i></p>
    </a>

    <ul class="nav nav-treeview">
        <li class="nav-item">
            <a href="addnewCandidate" class="nav-link">
            <!-- <a href="addnewCandidate" class="nav-link active"> -->
                <i class="far fa-circle nav-icon"></i>
                <p>General Information</p>
            </a>
        </li>
           
        <li class="nav-item" >
            <a href="educationInfo" class="nav-link">
                <i class="far fa-circle nav-icon" id="education" ></i>
                <p>Education</p>
            </a>
        </li>
       
        <li class="nav-item">
            <a href="trainingInfo" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Training</p>
            </a>
        </li>

        <li class="nav-item">
            <a href="workExperienceInfo" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>WorkExperience</p>
            </a>
        </li>


        <li class="nav-item">
            <a href="languageInfo" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Language</p>
            </a>
        </li>
    </ul>
</li>
</ul>

Answer 1

看来你在 js 中处理了错误的类选择器。例如

错误处理类选择器 $('.nav nav-pills nav-sidebar flex-column li').click(function(e) {

正确处理类选择器 $('.nav.nav-pills.nav-sidebar.flex-column li').click(function (e) {

$(document).ready(function () {
  $('.nav.nav-pills.nav-sidebar.flex-column li').click(function (e) {
    if ($(this).hasClass('has-treeview')) {
      $(this).toggleClass('menu-open');
    }
    e.preventDefault();
  });



  $('.nav.nav-treeview li a').click(function (e) {
    if ($(this).hasClass('nav-link')) {
      $('a').removeClass('active')
      $(this).addClass('active');
    }
    e.preventDefault();
  });

});

.nav {
  font-family: arial;
}
.nav .nav-item .nav-link{
  color: #000;
  text-decoration: none;
}

.nav .nav-item .nav-link.active{
  color: green;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">

  <li class="nav-item has-treeview">
    <a href="addnewCandidate" class="nav-link">
      <i class="nav-icon fas fa-tachometer-alt"></i>
      <p>
        Add new Candidate
        <i class="right fas fa-angle-left"></i>
      </p>
    </a>

    <ul class="nav nav-treeview">

      <li class="nav-item">
        <a href="addnewCandidate" class="nav-link">
          <i class="far fa-circle nav-icon"></i>
          <p>General Information</p>
        </a>
      </li>


      <li class="nav-item">
        <a href="educationInfo" class="nav-link">
          <i class="far fa-circle nav-icon" id="education"></i>
          <p>Education</p>
        </a>
      </li>

      <li class="nav-item">
        <a href="trainingInfo" class="nav-link">
          <i class="far fa-circle nav-icon"></i>
          <p>Training</p>
        </a>
      </li>

      <li class="nav-item">
        <a href="workExperienceInfo" class="nav-link">
          <i class="far fa-circle nav-icon"></i>
          <p>WorkExperience</p>
        </a>
      </li>


      <li class="nav-item">
        <a href="languageInfo" class="nav-link">
          <i class="far fa-circle nav-icon"></i>
          <p>Language</p>
        </a>
      </li>
    </ul>
  </li>
</ul>