How to change class of bootstrap navigation?

Question

I have a bootstrap navigation bar where "Add New Candidate" is my navigation option as a li. I want to change its class from "nav-item has-treeview" to "nav-item has-treeview menu-open" when user selects it and also change the class of of ul i.e. "General Information" inside the "Add New Candidate" to "nav-link active".

I have also tried solutions mentioned here 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

It seems you have handled wrong class selector in js. for example

wrong handling class selector $('.nav nav-pills nav-sidebar flex-column li').click(function(e) {

correct handling class selector $('.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>