Bootstrap menu added li active class onclick

0

I have the following boot menu

HTML

<div class="container">
  <ul class="nav navbar-nav">

    <li class="active">

        <a href="#" data-toggle="collapse" data-target=".menu-nav" class="collapsed drop-down" aria-expanded="false">Link1<span class="caret"></span></a>

        <ul id="menu-nav" class="nav menu-nav collapse" aria-expanded="false">

          <li> <!-- tambien agrega active -->

            <a href="javascript:;" class="collapsed" data-target=".menu-navs" data-toggle="collapse" aria-expanded="false">Sub Link1<span class="caret"></span></a>

            <ul id="menu-nav" class="nav menu-navs collapse" aria-expanded="false">

              <li> <!-- tambien agrega active -->

                <a href="javascript:;" class="collapsed" data-target=".menu-navss" data-toggle="collapse" aria-expanded="false">Sub1 Link1<span class="caret"></span></a>

                <ul id="menu-nav" class="nav menu-navss collapse" aria-expanded="false">

                  <li><p>Test Ok</p></li>

                </ul>

              </li>

            </ul>

          </li>

        </ul>

    </li>

    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>

  </ul>

</div>

How can I alter the addition of the "< li >" asset class when you click on any of the < li > ?

The following is not working for me

$("li").on("click",function(){
  $(".nav navbar-nav li").removeClass("active");
  $(this).addClass("active");
});

Example

link

    
asked by Diego Sagredo 27.12.2016 в 19:04
source

2 answers

1

You can try

$(function() {
  
  // elementos de la lista
  var menues = $(".nav li"); 

  // manejador de click sobre todos los elementos
  menues.click(function() {
     // eliminamos active de todos los elementos
     menues.removeClass("active");
     // activamos el elemento clicado.
     $(this).addClass("active");
  });

});
    
answered by 30.12.2016 в 12:21
0

Friend will always be left with the key Activate those that are open. since if you remove the asset it will be closed automatically for bootstrap reasons.

The only way to visualize it without the active class is to not use the bootstrap classes and to open the menu with jquery UI that would be open.

    
answered by 27.12.2016 в 19:27