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 vienehide.bs.dropdownimmediatamente 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.
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.
$('.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 ); } })
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");