Keep-boot-3-drop-down-open when clicked

Question

I need help in achieving the same navigation as the link below.

It has my code along with customer requirements. And I use Bootstrap 3

Bootstrap Dropdowns - dropdown.js 

jsfiddle link

Please, help.

Answer 1

Updated script

You only need to make one change:

Instead of listening for the .dropdown.active event for hide.bs.dropdown only, apply the event handler to .dropdown .

Basically, change:

$(".dropdown.active").on("hide.bs.dropdown",function(e) {

at

$(".dropdown").on("hide.bs.dropdown",function(e) {

---

EDIT: To override the default behavior of the drop-down list, you will need to ignore the active state, since more than one li element can remain extended, and you will need to switch the visibility yourself.

Here's an updated demo

The code:

 $(function(){ // Handle show/hide toggle yourself $(".dropdown").on("click",function(e) { if($(e.currentTarget).hasClass("open")) $(e.currentTarget).toggleClass("open",false); else $(e.currentTarget).toggleClass("open",true); e.preventDefault(); return false; }); // suppressing default bahavior $(".dropdown").on("hide.bs.dropdown", doNothing); $(".dropdown").on("show.bs.dropdown", doNothing); function doNothing(e) { e.preventDefault(); return false; } }); 

Answer 2

Not sure if this is correct, but I did

 $(function(){ $('.nav').find('li.dropdown.active').addClass('open'); $(".dropdown").on("hide.bs.dropdown",function(e) { e.preventDefault(); return false; }); $('.navbar-main li').on('click', function (){ var me = $(this); $('.navbar-main li').removeClass('open'); $(this).addClass('open'); }); }); 

and his working tone :)