set link of my navbar and its children active with bootstrap

user_14154480 0
Viewed 751

Below shows code for My Navbar, based on the code it shows that the dashboard is currently active. My question is below this original code.

CSS for this sidebar:

<!-- ORIGINAL -->
<!-- Sidebar -->
<div class="sidebar">
  <!-- Sidebar Menu -->
  <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <li class="nav-item">
            <a href="index.php" class="nav-link">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                Dashboard
              </p>
            </a>
          </li>
          <li class="nav-item has-treeview menu-open">
            <a class="nav-link active">
              <i class="nav-icon fas fa-th"></i>
              <p>
                Project
                <i class="fas fa-angle-left right"></i>
              </p>
            </a>
              <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="project.php" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Projects List</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="projectReport.php" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Projects Report</p>
                </a>
              </li>
            </ul>
          </li>
        </ul>
    </nav>
</div>

My Question: How can i make the <li class="nav-item has-treeview"> becoming <li class="nav-item has-treeview menu-open"> also how to set project and project list's <a class="nav-link"> into <a class="nav-link active"> and removing 'active' from the <a href="index.php" class="nav-link active"> tag for dashboard into <a href="index.php" class="nav-link "> by using jquery?

Below is the code and picture, for when i choose, Projects List within the project <li>: Picture: Projects List

<!-- Sidebar -->
<div class="sidebar">
  <!-- Sidebar Menu -->
  <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <li class="nav-item">
            <a href="index.php" class="nav-link">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                Dashboard
              </p>
            </a>
          </li>
          <li class="nav-item has-treeview menu-open">
            <a class="nav-link active">
              <i class="nav-icon fas fa-th"></i>
              <p>
                Project
                <i class="fas fa-angle-left right"></i>
              </p>
            </a>
              <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="project.php" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Projects List</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="projectReport.php" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Projects Report</p>
                </a>
              </li>
            </ul>
          </li>
        </ul>
    </nav>
</div>

Below is code and picture when i choose Projects Report within the project <li>: Picture: Projects Report

<!-- Sidebar -->
<div class="sidebar">
  <!-- Sidebar Menu -->
  <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <li class="nav-item">
            <a href="index.php" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                Dashboard
              </p>
            </a>
          </li>
          <li class="nav-item has-treeview menu-open">
            <a class="nav-link active">
              <i class="nav-icon fas fa-th"></i>
              <p>
                Project
                <i class="fas fa-angle-left right"></i>
              </p>
            </a>
              <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="project.php" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Projects List</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="projectReport.php" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Projects Report</p>
                </a>
              </li>
            </ul>
          </li>
        </ul>
    </nav>
</div>
navbar twitter-bootstrap html jquery javascript
2 Answers

Did it the way you wanted. Through the active class. By clicking on the tag a (item - Project), a menu will appear / hide on the principle of a counter.

/*---This is a working example in vanilla js---*/

/*let click_a = document.querySelector('.nav-item.has-treeview > a');
let click_popup = document.querySelector('.nav.nav-treeview');

click_a.onclick = function() {
    click_popup.classList.toggle('active');
}*/

/*---This is a working example in jquery---*/

$('.nav-item.has-treeview > a').on('click', function(){
  $('.nav.nav-treeview').toggleClass('active');
});
.nav.nav-treeview {
  display: none;
}

.active {
  display: block!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
  <!-- Sidebar Menu -->
  <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <li class="nav-item">
            <a href="index.php" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                Dashboard
              </p>
            </a>
          </li>
          <li class="nav-item has-treeview">
            <a class="nav-link">
              <i class="nav-icon fas fa-th"></i>
              <p>
                Project
                <i class="fas fa-angle-left right"></i>
              </p>
            </a>
              <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="project.php" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Projects List</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="project.php" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Projects Report</p>
                </a>
              </li>
            </ul>
          </li>
        </ul>
    </nav>
</div>

user_135734440 
$(function() {
    "use strict";
     var url = window.location + "";
        var path = url.replace(window.location.protocol + "//" + window.location.host + "/", "");
        var element = $('ul#sidebarnav a').filter(function() {
            return this.href === url || this.href === path;// || url.href.indexOf(this.href) === 0;
        });
        element.parentsUntil(".sidebar-nav").each(function (index)
        {
            if($(this).is("li") && $(this).children("a").length !== 0)
            {
                $(this).children("a").addClass("active");
                $(this).parent("ul#sidebarnav").length === 0
                    ? $(this).addClass("active")
                    : $(this).addClass("selected");
            }
            else if(!$(this).is("ul") && $(this).children("a").length === 0)
            {
                $(this).addClass("selected");
                
            }
            else if($(this).is("ul")){
                $(this).addClass('in');
            }
            
        });

    element.addClass("active"); 
    $('#sidebarnav a').on('click', function (e) {
        
            if (!$(this).hasClass("active")) {
                // hide any open menus and remove all other classes
                $("ul", $(this).parents("ul:first")).removeClass("in");
                $("a", $(this).parents("ul:first")).removeClass("active");
                
                // open our new menu and add the open class
                $(this).next("ul").addClass("in");
                $(this).addClass("active");
                
            }
            else if ($(this).hasClass("active")) {
                $(this).removeClass("active");
                $(this).parents("ul:first").removeClass("active");
                $(this).next("ul").removeClass("in");
            }
    });
    $('#sidebarnav >li >a.has-arrow').on('click', function (e) {
        e.preventDefault();
    });
    
});
user_141544800
Related