Tenere aperto il menu a discesa Bootstrap quando si fa clic su Off

Se il menu a discesa è visibile, e faccio clic all’esterno del menu a discesa, viene chiuso. Ho bisogno che non si chiuda.

Dalla documentazione:

Quando viene aperto, il plugin aggiunge anche .dropdown-backdrop come area di clic per chiudere i menu a discesa quando si fa clic all’esterno del menu.

Quale codice JavaScript posso aggiungere per impedire la chiusura del menu a discesa?

Dalla sezione eventi della documentazione a dropdown Bootstrap :

hide.bs.dropdown : questo evento viene hide.bs.dropdown immediatamente quando viene chiamato il metodo di istanza nascosta.

Per cominciare, per evitare che il menu a discesa si chiuda, possiamo semplicemente ascoltare questo evento e impedirgli di procedere restituendo false :

 $('#myDropdown').on('hide.bs.dropdown', function () { return false; }); 

Per una soluzione completa, probabilmente vorrai che si chiuda quando viene cliccato il menu a discesa. Quindi solo una parte del tempo vorremmo evitare che la scatola si chiuda.

Per fare ciò .data() flag .data() in altri due eventi .data() dal menu a discesa:

  • shown.bs.dropdown – Quando viene mostrato, imposteremo .data('closable') su false
  • click – Quando si fa clic, imposteremo .data('closable') su true

Pertanto, se l’evento hide.bs.dropdown è stato generato da un click sul menu a discesa, consentiremo una chiusura.

Demo live in jsFiddle

JavaScript

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

HTML (nota che ho aggiunto la class keep-open al menu a discesa)

  

Le modifiche alla versione in alcune dipendenze hanno causato il blocco di KyleMit e molte altre soluzioni per non funzionare più. Ho scavato un po ‘oltre e per qualche ragione un click() viene inviato quando Bootstrap tenta e fallisce hide.bs.dropdown , seguito da un’altra chiamata a hide.bs.dropdown . Ho risolto questo problema forzando il click() chiusura click() sul pulsante stesso, non nell’intero menu a discesa.

Demo live in Bootply

JavaScript

 $('.keep-open').on({ "shown.bs.dropdown": function() { $(this).attr('closable', false); }, //"click": function() { }, // For some reason a click() is sent when Bootstrap tries and fails hide.bs.dropdown "hide.bs.dropdown": function() { return $(this).attr('closable') == 'true'; } }); $('.keep-open').children().first().on({ "click": function() { $(this).parent().attr('closable', true ); } }) 

HTML

 

Click the dropdown button

It will stay open unless clicked again to close

 $('.dropdown.keep-open').on({ "shown.bs.dropdown": function() { this.closable = true; }, "click": function(e) { var target = $(e.target); if(target.hasClass("btn-primary")) this.closable = true; else this.closable = false; }, "hide.bs.dropdown": function() { return this.closable; } }); 
 body { margin: 10px; } 
      

Click the dropdown button

It will stay open unless clicked again to close

About this SO Question: Keep dropdown menu open
Fork This Skeleton Here Bootrsap 3.0 Skeleton
Bootstrap Documentation: Dropdowns

Ho trovato una soluzione che non richiede nuovi js. Non utilizzare un menu a discesa e utilizzare invece la compressione bootstrap. Uso ancora alcune classi dropdown per renderlo simile a un menu a discesa.

  

Sono riuscito a utilizzare una combinazione della soluzione di KyleMitt sopra e ho riscontrato problemi durante l’utilizzo di questo all’interno di un object Footable (credo sia dovuto alla creazione dynamic della tabella). Ho applicato .keep-open a .dropdown .div al livello più alto.

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

La funzionalità di questo codice ti consente di fare clic all’esterno per chiudere il menu a discesa, ma fare clic sugli elementi al suo interno lo manterrebbe aperto. Per favore fatemi sapere se avete suggerimenti / commenti su questo e cercherò di modificare.

Un’altra soluzione per questo. Tenere aperto il menu a discesa dopo aver fatto clic all’interno del menu .dropdown:

 $('.heading .options .dropdown').on({ "shown.bs.dropdown":function(){this.closable = true;}, "click": function(e){ var target = $(e.target); var d = target.data(); if(typeof d.toggle != 'undefined' && d.toggle == 'dropdown') this.closable = true; else { var p = target.parent(); var dd = p.data(); if(typeof dd.toggle != 'undefined' && dd.toggle == 'dropdown') this.closable = true; else { if(target.hasClass('dropdown-menu')) this.closable = false; else { var pp = target.parent('.dropdown-menu'); if(typeof pp != 'undefined') this.closable = false; else this.closable = true; } } } }, "hide.bs.dropdown": function(){return this.closable;} }); 

Tenere aperto il menu a discesa dopo aver fatto clic all’interno del menu .dropdown

  $(document.body).on({ "shown.bs.dropdown": function(){ this.closable = true; }, "hide.bs.dropdown": function(){ return this.closable; }, "click": function(e){ this.closable = !$(e.target).closest(".dropdown-menu").length; }, },".dropdown.keepopen");