1

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>
N'Bayramberdiyev
  • 5,936
  • 7
  • 27
  • 47
Euclid Stonna
  • 49
  • 6

1 Answers1

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>
Ponsakthi Anand
  • 305
  • 2
  • 13
  • I am doing it in MVC pattern. The way my system currently is: when I load the dashboard, the side navigation bar is in a sidebar.php file where I have added the changes you mentioned. But the problem is that the class is changed in this snippet but not on my system. Also, on adding these updates the navigation links don't work too. – Euclid Stonna Mar 11 '20 at 10:04
  • if you include sidebar.php in the main file it will work fine. I assume that sidebar.php will load every time you hit the link. can you share me the code to help you in detail – Ponsakthi Anand Mar 11 '20 at 10:22
  • can you post the code using https://stackblitz.com (temporarily) or git and share it to me. Because the code you have shared with me not enough to help you. – Ponsakthi Anand Mar 11 '20 at 11:49
  • Just replace the js code with mine from the answer section its working fine for me. if still not helps with you. share me the code let me try to help you – Ponsakthi Anand Mar 11 '20 at 11:56
  • Thank you, everyone. The problem was solved when I kept the jquery scripts in the main layout file, not in the templates. – Euclid Stonna Mar 15 '20 at 10:59