Bootstrap/css vertikale Navbar sollte

Question

Bootstrap/css vertikale Navigationsleiste sollte Untermenü Untermenü Onclick statt Hover-Anzeige Onclick statt schweben

Ich habe eine vertikale Navigationsleiste angezeigt werden, die auf schweben Untermenüs angezeigt werden. Anstatt zu schweben, will ich es beim Klick. Irgendwelche Möglichkeiten, das mit reinem css/bootstrap zu tun?

.navigation { 
 
    width: 300px; 
 
} 
 

 

 
.mainmenu, .submenu { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.mainmenu a { 
 
    display: block; 
 
    background-color: #CCC; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    color: #000; 
 
} 
 

 

 
.mainmenu a:hover { 
 
    background-color: #C5C5C5; 
 
} 
 

 
.mainmenu li:hover .submenu { 
 
    display: block; 
 
    max-height: 200px; 
 
} 
 

 
.submenu a { 
 
    background-color: #999; 
 
} 
 

 

 
.submenu a:hover { 
 
    background-color: #666; 
 
} 
 

 

 
.submenu { 
 
    overflow: hidden; 
 
    max-height: 0; 
 
    -webkit-transition: all 0.5s ease-out; 
 
}

<nav class="navigation"> 
 
    <ul class="mainmenu"> 
 
    <li><a href="">Home</a> 
 
    <ul class="submenu"> 
 
     <li><a href="">Tops</a></li> 
 
     <li><a href="">Bottoms</a></li> 
 
     <li><a href="">Footwear</a></li> 
 
     </ul></li> 
 
    <li><a href="">About</a> 
 
    <ul class="submenu"> 
 
     <li><a href="">Tops</a></li> 
 
     <li><a href="">Bottoms</a></li> 
 
     <li><a href="">Footwear</a></li> 
 
     </ul></li> 
 
    <li><a href="">Products</a> 
 
     <ul class="submenu"> 
 
     <li><a href="">Tops</a></li> 
 
     <li><a href="">Bottoms</a></li> 
 
     <li><a href="">Footwear</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="">Contact us</a></li> 
 
    </ul> 
 
</nav>

Vielen Dank im Voraus .....

Answer 1

$(".mainmenu li").click(function(){ 
 
    $(".mainmenu li").removeClass('active'); 
 
    $(this).toggleClass('active'); 
 
});

.navigation { 
 
    width: 300px; 
 
} 
 

 

 
.mainmenu, .submenu { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.mainmenu a { 
 
    display: block; 
 
    background-color: #CCC; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    color: #000; 
 
} 
 

 

 
.mainmenu a:hover { 
 
    background-color: #C5C5C5; 
 
} 
 

 
.mainmenu li.active .submenu { 
 
    display: block; 
 
    max-height: 200px; 
 
} 
 

 
.submenu a { 
 
    background-color: #999; 
 
} 
 

 

 
.submenu a:hover { 
 
    background-color: #666; 
 
} 
 

 

 
.submenu { 
 
    overflow: hidden; 
 
    max-height: 0; 
 
    -webkit-transition: all 0.5s ease-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navigation"> 
 
    <ul class="mainmenu"> 
 
    <li><a href="#">Home</a> 
 
    <ul class="submenu"> 
 
     <li><a href="">Tops</a></li> 
 
     <li><a href="">Bottoms</a></li> 
 
     <li><a href="">Footwear</a></li> 
 
     </ul></li> 
 
    <li><a href="#">About</a> 
 
    <ul class="submenu"> 
 
     <li><a href="">Tops</a></li> 
 
     <li><a href="">Bottoms</a></li> 
 
     <li><a href="">Footwear</a></li> 
 
     </ul></li> 
 
    <li><a href="#">Products</a> 
 
     <ul class="submenu"> 
 
     <li><a href="">Tops</a></li> 
 
     <li><a href="">Bottoms</a></li> 
 
     <li><a href="">Footwear</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Contact us</a></li> 
 
    </ul> 
 
</nav>

Mit wenigen Zeilen Code jQuery Sie das Verhalten erreichen können Sie erwarten sind.