Das Bootstrap-Dropdown-Menü wird beim Klicken geschlossen

Ich habe ein Formular in ein Bootstrap-Dropdown-Menü eingefügt, aber wenn ich auf eines der Felder im Formular klicke, wird das Dropdown-Menü ausgeblendet. Ich habe diesen Code, weiß aber nicht, wo ich ihn ablegen soll, um zu verhindern, dass das Dropdown-Menü verschwindet.

$(function test() {
  // Setup drop down menu
  $('.dropdown-toggle').dropdown();

  // Fix input element click problem
  $('.dropdown input, .dropdown label').click(function(e) {
    e.stopPropagation();
  });
});

Könnte mir bitte jemand sagen, wo ich das hinstellen soll? Ich habe es im Bootstrap-Dropdown versucht, ich habe es im HTML versucht, aber es funktioniert immer noch nicht.

Verwenden Sie einfach dieses Beispiel. Diese Lösung funktioniert für mich.

<script type="text/javascript">
window.addEvent('domready',function() {    
   Element.prototype.hide = function() {
      $(function () { 
        // replace your tab id with myTab
        //<ul id="myTab" class="nav nav-tabs">
        $('#myTab li:eq(1) a').tab('show');
      });      
   };
});
</script>

Hoffe es wird helfen. Vielen Dank.

Sie können den Dropdown-Aufruf insgesamt weglassen, das Bootstrap-Dropdown funktioniert ohne ihn. Stellen Sie sicher, dass Sie Ihr Skript richtig verpacken. Sie können es in die Kopfzeile oder den Hauptteil Ihrer Seite aufnehmen, obwohl ich es persönlich lieber auf den Hauptteil Ihrer Seite setze.

JS

<script type="text/javascript">
    $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
        e.stopPropagation();
    });
</script>

Wenn Sie aufhören möchten, nur einige der Dropdown-Menüs zu schließen, nicht alle, fügen Sie Ihrem ul-Block einfach eine zusätzliche Klasse hinzu:

<ul class="dropdown-menu keep-open-on-click">

Und benutze diesen Code:

$(document).on('click', '.dropdown-menu', function(e) {
    if ($(this).hasClass('keep-open-on-click')) { e.stopPropagation(); }
});

Die Zeit, die vergangen ist, seit die Antwort akzeptiert wurde, aber wenn Sie das Dropdown geöffnet lassen möchten, wenn es sich wie eine Art Dialog verhält, denke ich am besten:

$('.dropdown').dropdown().on("hide.bs.dropdown", function(e) {
            if ($.contains(dropdown, e.target)) {
                e.preventDefault();
            //or return false;
            }
        });

Sie müssen verhindern, dass das Ereignis den DOM-Baum sprudelt:

$('.dropdown-menu').click(function(e) {
    e.stopPropagation();
});

event.stopPropagation verhindert, dass das Ereignis den Knoten erreicht, auf dem es schließlich vom Bootstrap-Ausblendmenü verarbeitet wird.

Dies funktioniert für meine (seitliche Seitenleiste, die einen einfachen Link mit dem Bootstrap-Umschalter öffnet)

$('.dropdown').find("a").not('.dropdown-toggle').on("click",function(e){
    e.stopImmediatePropagation();
});

Vielen Dank für die obige Antwort. Ich hatte das gleiche Problem mit Untermenüs unter den Dropdown-Menüs. Mit der obigen Lösung konnte ich das Problem auch dafür lösen.

$('.dropdown-menu .dropdown-submenu a[data-toggle="dropdown-submenu"]').click(function (e)
{                   
    e.stopPropagation();
});

Stellen

<script type="text/javascript">
    $('.dropdown-menu').click(function(e) {
          e.stopPropagation();
    });
</script>

Entfernen Sie bei der ursprünglichen Antwort alle Klassen und setzen Sie einfach die Klasse ".dropdown-menu" ein. Es hat bei mir funktioniert. Ich habe ein Eingabefeld im Dropdown-Menü.

Wenn Sie sich die Quellen des Dropdown-Widgets ansehen, sehen Sie Folgendes:

$(document)
  .on('click.bs.dropdown.data-api', '.dropdown form', function(e) {
    e.stopPropagation()
  })

Sie haben also folgende Möglichkeiten:

1. Wickeln Sie einfach Ihr Dropdown mit Formular
2. Oder Sie können einen Ereignis-Listener für das Klickereignis von .dropdown YOUR_SELECTOR hinzufügen

$(document)
  .on('click.my', '.dropdown some_selector', function(e) {
    e.stopPropagation()
  })