Bootstrap: prevent the menu from closing when clicked off it

I found this solution:

HTML

<li role="presentation" class="dropdown keep-open"> <a id="drop6" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown1 <span class="caret"></span> </a>
    <ul id="menu3" class="dropdown-menu" aria-labelledby="drop6">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>

Javascript

$('.dropdown.keep-open').on({
    "shown.bs.dropdown": function() { this.closable = false; },
    "click":             function() { this.closable = true; },
    "hide.bs.dropdown":  function() { return this.closable; }
});

Sorry, got what you wanted, try this:

  

I've edited the question, see if it suits your purpose:

  $(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; }
    });
 });

Here's the example running on JSFiddle

The solution I found was: If it is not to hide then record what is open and then open again.

It was like this.:

$(document.body).on('click', function(event){
    var windowWidth = $(window).width();
    if(windowWidth > 991){
        if (!$(event.target).closest('.dropdown-toggle').length) {
            var obj=$('.dropdown.open');
            setTimeout(function(){obj.addClass('open');},0);
        }
    }
});

The example in jsfiddle .

The dropdown component of the bootstrap has events to handle all interactions. show.bs.dropdown-> This event fires immediately when the show instance method is called.

shown.bs.dropdown-> This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete)

hide.bs.dropdown-> This event is fired immediately when the hide instance method has been called.

hidden.bs.dropdown-> This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete)

Source: link

You can use this code.:

$('.dropdown.keep-open').on({
"shown.bs.dropdown": function() { this.closable = false; },
"click":             function() { this.closable = true; },
"hide.bs.dropdown":  function() { return this.closable; }

});

Source: link Home However when doing tests I found that if we open a second menu the 1st is open. If it is not the goal you can put this code.:

 $('.dropdown').on({
    "show.bs.dropdown": function() {
       $('.dropdown.open').removeClass('open');
    },
    "shown.bs.dropdown": function() {
       this.closable = false;
    },
    "click":function() {
       this.closable = true;
    },
    "hide.bs.dropdown": function() {
        return this.closable;
    }
});

Example:
link

Remove the data-toggle from your menu buttons and make their display code without affecting the behavior of the boostrap.

I used the html of your html for the click of the buttons, find the internal menu and display it or not if it is clicked.

Just put this script:

$(document).ready(function(){

    $('.nav-pills .dropdown a').on('click',function(){

        var jqMenu = $(this).closest('.dropdown').find('.dropdown-menu');

        if (jqMenu.length > 0)
        {
            if (jqMenu.is(':visible')) {
                jqMenu.hide();
            }
            else {
                jqMenu.show();
            }
        } 
    })
})

Link to solution - CODEPEN