如何在Bootstrap可折叠sidenav中添加活动类onclick

Question

I am trying to add/ remove active class in bootstrap collapsible sidenav on click. If i click on specific tab, it should be active until i switch to another tab. Have tried with addclass/ removeclass, but no change in html onclick. In my example id adds "active" but does't remove from other elements. Could anyone suggest how to achieve this.

 $(document).ready(function () { $('#sidebarCollapse').on('click', function () { $('#sidebar').toggleClass('active'); }); }); 

 /* --------------------------------------------------- SIDEBAR STYLE ----------------------------------------------------- */ .wrapper { display: flex; align-items: stretch; } #sidebar { min-width: 250px; max-width: 250px; background: #dde4e8; color: #000; transition: all 0.3s; } #sidebar.active { min-width: 100px; max-width: 100px; text-align: center; } #sidebar.active .sidebar-header h3, #sidebar.active .CTAs { display: none; } #sidebar.active .sidebar-header strong { display: block; } #sidebar ul li a { text-align: left; } #sidebar.active ul li a { padding: 20px 10px; text-align: center; font-size: 0.85em; } #sidebar.active ul li a icon{ display:none; } #sidebar.active ul li ai { margin-right: 0; display: block; font-size: 1.8em; margin-bottom: 5px; } #sidebar.active ul ul a { padding: 10px !important; } #sidebar.active .dropdown-toggle::after { top: auto; bottom: 10px; right: 50%; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } #sidebar .sidebar-header { padding: 24px; background: #dde4e8; border-bottom: 1px solid #c60429 ; } #sidebar .sidebar-header1{ padding: 20px; background: #dde4e8; } #sidebar .sidebar-header strong { display: none; font-size: 1.8em; } #sidebar ul.components { padding: 20px 0; border-bottom: 1px solid #c60429 ; } #sidebar ul li a { padding: 10px; font-size: 1.1em; display: block; } #sidebar ul li a:hover { color: #c60429 ; background: #fff; } #sidebar ul li ai { margin-right: 10px; } #sidebar ul li.active>a, a[aria-expanded="true"] { color: #fff; background: #c60429; } a[data-toggle="collapse"] { position: relative; } .dropdown-toggle::after { display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } ul ul a { font-size: 0.9em !important; padding-left: 30px !important; background: #c60429; } ul.CTAs { padding: 20px; } ul.CTAs a { text-align: center; font-size: 0.9em !important; display: block; border-radius: 5px; margin-bottom: 5px; } a.download { background: #fff; color: #c60000; } a.article, a.article:hover { background: #c60429 !important; color: #fff !important; } /* --------------------------------------------------- CONTENT STYLE ----------------------------------------------------- */ #content { width: 100%; padding: 20px; min-height: 100vh; transition: all 0.3s; } /* --------------------------------------------------- MEDIAQUERIES ----------------------------------------------------- */ @media (max-width: 768px) { #sidebar { min-width: 130px; max-width: 130px; text-align: center; margin-left: -130px !important; } .dropdown-toggle::after { top: auto; bottom: 10px; right: 50%; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } #sidebar.active { margin-left: 0 !important; } #sidebar .sidebar-header h3, #sidebar .CTAs { display: none; } #sidebar .sidebar-header strong { display: block; } #sidebar ul li a { padding: 20px 10px; } #sidebar ul li a span { font-size: 0.85em; } #sidebar ul li ai { margin-right: 0; display: block; } #sidebar ul ul a { padding: 10px !important; } #sidebar ul li ai { font-size: 1.3em; } #sidebar { margin-left: 0; } #sidebarCollapse span { display: none; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="sidebar"> <div class="sidebar-header "> <h3><img src="/logo2.png" class="img-fluid flex-center"></h3> <strong><img src="/logo1.png" class="img-fluid flex-center"></strong> </div> <div class="sidebar-header1"> </div> <ul class="list-unstyled components"> <li class ="active"> <a href="/" > <i class="fas fa-home"></i> <icon>Home</icon> </a> </li> <li> <a href="#"> <i class="fas fa-building"></i> <icon>Organizations</icon> </a> </li> <li> <a href="#"> <i class="fas fa-chart-pie"></i> <icon>Reports</icon> </a> </li> </ul> </nav> <button type="button" id="sidebarCollapse" class="btn btn-info"> <i class="fas fa-align-left"></i> </button> 

Answer 1

Use

         $('#sidebar ul li').on('click', function () {
             $('#sidebar ul .active').removeClass('active');
            $(this).addClass('active');
        });

See snippet:

 $(document).ready(function () { $('#sidebarCollapse').on('click', function () { $('#sidebar').toggleClass('active'); }); $('#sidebar ul li').on('click', function () { $('#sidebar ul .active').removeClass('active'); $(this).addClass('active'); }); }); 

 .wrapper { display: flex; align-items: stretch; } #sidebar { min-width: 250px; max-width: 250px; background: #dde4e8; color: #000; transition: all 0.3s; } #sidebar.active { min-width: 100px; max-width: 100px; text-align: center; } #sidebar.active .sidebar-header h3, #sidebar.active .CTAs { display: none; } #sidebar.active .sidebar-header strong { display: block; } #sidebar ul li a { text-align: left; } #sidebar.active ul li a { padding: 20px 10px; text-align: center; font-size: 0.85em; } #sidebar.active ul li a icon{ display:none; } #sidebar.active ul li ai { margin-right: 0; display: block; font-size: 1.8em; margin-bottom: 5px; } #sidebar.active ul ul a { padding: 10px !important; } #sidebar.active .dropdown-toggle::after { top: auto; bottom: 10px; right: 50%; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } #sidebar .sidebar-header { padding: 24px; background: #dde4e8; border-bottom: 1px solid #c60429 ; } #sidebar .sidebar-header1{ padding: 20px; background: #dde4e8; } #sidebar .sidebar-header strong { display: none; font-size: 1.8em; } #sidebar ul.components { padding: 20px 0; border-bottom: 1px solid #c60429 ; } #sidebar ul li a { padding: 10px; font-size: 1.1em; display: block; } #sidebar ul li a:hover { color: #c60429 ; background: #fff; } #sidebar ul li ai { margin-right: 10px; } #sidebar ul li.active>a, a[aria-expanded="true"] { color: #fff; background: #c60429; } a[data-toggle="collapse"] { position: relative; } .dropdown-toggle::after { display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } ul ul a { font-size: 0.9em !important; padding-left: 30px !important; background: #c60429; } ul.CTAs { padding: 20px; } ul.CTAs a { text-align: center; font-size: 0.9em !important; display: block; border-radius: 5px; margin-bottom: 5px; } a.download { background: #fff; color: #c60000; } a.article, a.article:hover { background: #c60429 !important; color: #fff !important; } /* --------------------------------------------------- CONTENT STYLE ----------------------------------------------------- */ #content { width: 100%; padding: 20px; min-height: 100vh; transition: all 0.3s; } /* --------------------------------------------------- MEDIAQUERIES ----------------------------------------------------- */ @media (max-width: 768px) { #sidebar { min-width: 130px; max-width: 130px; text-align: center; margin-left: -130px !important; } .dropdown-toggle::after { top: auto; bottom: 10px; right: 50%; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } #sidebar.active { margin-left: 0 !important; } #sidebar .sidebar-header h3, #sidebar .CTAs { display: none; } #sidebar .sidebar-header strong { display: block; } #sidebar ul li a { padding: 20px 10px; } #sidebar ul li a span { font-size: 0.85em; } #sidebar ul li ai { margin-right: 0; display: block; } #sidebar ul ul a { padding: 10px !important; } #sidebar ul li ai { font-size: 1.3em; } #sidebar { margin-left: 0; } #sidebarCollapse span { display: none; } } 

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <nav id="sidebar"> <div class="sidebar-header "> <h3><img src="/logo2.png" class="img-fluid flex-center"></h3> <strong><img src="/logo1.png" class="img-fluid flex-center"></strong> </div> <div class="sidebar-header1"> </div> <ul class="list-unstyled components"> <li class ="active"> <a href="/" > <i class="fas fa-home"></i> <icon>Home</icon> </a> </li> <li> <a href="#"> <i class="fas fa-building"></i> <icon>Organizations</icon> </a> </li> <li> <a href="#"> <i class="fas fa-chart-pie"></i> <icon>Reports</icon> </a> </li> </ul> </nav> <button type="button" id="sidebarCollapse" class="btn btn-info"> <i class="fas fa-align-left"></i> </button> 

Answer 2

Here you bind the event to wrong element. You should bind to #sidebar ul > li instead of the other #sidebarCollapse.

Before that, you must also toggle any .active element at that time before toggle another one.

 $(document).ready(function () { $('#sidebar ul > li').on('click', function () { $('#sidebar ul > li.active').toggleClass('active'); $(this).toggleClass('active'); }); }); 

 /* --------------------------------------------------- SIDEBAR STYLE ----------------------------------------------------- */ .wrapper { display: flex; align-items: stretch; } #sidebar { min-width: 250px; max-width: 250px; background: #dde4e8; color: #000; transition: all 0.3s; } #sidebar.active { min-width: 100px; max-width: 100px; text-align: center; } #sidebar.active .sidebar-header h3, #sidebar.active .CTAs { display: none; } #sidebar.active .sidebar-header strong { display: block; } #sidebar ul li a { text-align: left; } #sidebar.active ul li a { padding: 20px 10px; text-align: center; font-size: 0.85em; } #sidebar.active ul li a icon{ display:none; } #sidebar.active ul li ai { margin-right: 0; display: block; font-size: 1.8em; margin-bottom: 5px; } #sidebar.active ul ul a { padding: 10px !important; } #sidebar.active .dropdown-toggle::after { top: auto; bottom: 10px; right: 50%; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } #sidebar .sidebar-header { padding: 24px; background: #dde4e8; border-bottom: 1px solid #c60429 ; } #sidebar .sidebar-header1{ padding: 20px; background: #dde4e8; } #sidebar .sidebar-header strong { display: none; font-size: 1.8em; } #sidebar ul.components { padding: 20px 0; border-bottom: 1px solid #c60429 ; } #sidebar ul li a { padding: 10px; font-size: 1.1em; display: block; } #sidebar ul li a:hover { color: #c60429 ; background: #fff; } #sidebar ul li ai { margin-right: 10px; } #sidebar ul li.active>a, a[aria-expanded="true"] { color: #fff; background: #c60429; } a[data-toggle="collapse"] { position: relative; } .dropdown-toggle::after { display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } ul ul a { font-size: 0.9em !important; padding-left: 30px !important; background: #c60429; } ul.CTAs { padding: 20px; } ul.CTAs a { text-align: center; font-size: 0.9em !important; display: block; border-radius: 5px; margin-bottom: 5px; } a.download { background: #fff; color: #c60000; } a.article, a.article:hover { background: #c60429 !important; color: #fff !important; } /* --------------------------------------------------- CONTENT STYLE ----------------------------------------------------- */ #content { width: 100%; padding: 20px; min-height: 100vh; transition: all 0.3s; } /* --------------------------------------------------- MEDIAQUERIES ----------------------------------------------------- */ @media (max-width: 768px) { #sidebar { min-width: 130px; max-width: 130px; text-align: center; margin-left: -130px !important; } .dropdown-toggle::after { top: auto; bottom: 10px; right: 50%; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } #sidebar.active { margin-left: 0 !important; } #sidebar .sidebar-header h3, #sidebar .CTAs { display: none; } #sidebar .sidebar-header strong { display: block; } #sidebar ul li a { padding: 20px 10px; } #sidebar ul li a span { font-size: 0.85em; } #sidebar ul li ai { margin-right: 0; display: block; } #sidebar ul ul a { padding: 10px !important; } #sidebar ul li ai { font-size: 1.3em; } #sidebar { margin-left: 0; } #sidebarCollapse span { display: none; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="sidebar"> <div class="sidebar-header "> <h3><img src="/logo2.png" class="img-fluid flex-center"></h3> <strong><img src="/logo1.png" class="img-fluid flex-center"></strong> </div> <div class="sidebar-header1"> </div> <ul class="list-unstyled components"> <li class ="active"> <a href="/" > <i class="fas fa-home"></i> <icon>Home</icon> </a> </li> <li> <a href="#"> <i class="fas fa-building"></i> <icon>Organizations</icon> </a> </li> <li> <a href="#"> <i class="fas fa-chart-pie"></i> <icon>Reports</icon> </a> </li> </ul> </nav> <button type="button" id="sidebarCollapse" class="btn btn-info"> <i class="fas fa-align-left"></i> </button>