javascript – Make Bootstrap dropdown close when clicking another dropdown in the same menu?

Question:

The menu needs to stay open while I click anywhere in the document or on the screen, however when I click on the dropdown of a second menu it should close the previous one, and it also needs to open and close by clicking 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; }
    });
 });

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

See the menu in the JSIDDLE

Answer:

I 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; }
    });
 });