Close the Bootstrap dropdown by clicking on another dropdown in the same menu?

Question

The menu needs to remain open while I click anywhere on the document or screen, however, when I click on the dropdown of a second menu, it should close the previous one, and also need to open and close by clicking on the dropdown.

My bootstrap code:

 $(function() {
    $('.dropdown.opened')
    .on({
        "shown.bs.dropdown": function() { 
            this.closable = ($('.dropdown.open').length > 1) ? true : false 
         },
        "click":             function() { this.closable = true; 
        if (($('.dropdown.open').length > 1)) {
           $('.dropdown.opened').removeClass('open');
          }

        },
        "hide.bs.dropdown":  function() { return this.closable; }
    });
 });

Note that in the rule I am checking if there is at least 1 open, so it changes the behavior, dropdown, but it should close all menus when I click on any other or the same dropdown, and start the dropdown process again.

View the menu in JSIDDLE

Answer 1

Already solved the problem, just make a Trigger on the button:

$(function() {
    $('.dropdown.opened')
    .on({
        "shown.bs.dropdown": function() { 
            this.closable = ($('.dropdown.open').length > 1) ? true : false 
         },
        "click":             function() { this.closable = true; 
        $('.dropdown.opened.open').trigger('click');

        },
        "hide.bs.dropdown":  function() { return this.closable; }
    });
 });

Answer 2

One solution: Remove the check if (($('.dropdown.open').length > 1))

$(function() {

$('.dropdown.opened')
.on({
    "shown.bs.dropdown": function() { this.closable = ($('.dropdown.open').length > 1) ? true : false },
    "click":             function() { this.closable = true; 
       $('.dropdown.opened').removeClass('open');

    },
    "hide.bs.dropdown":  function() { return this.closable; }
})

});

View the menu in JSIDDLE

Answer 3

As the removeClass parameter you must pass the opened string. If you remove the open class, it will get stuck. Follow the fiddle:

http://jsfiddle.net/1Lgkbget/6/

(I changed our friend above)