it-swarm.com.de

Halten Sie Bootstrap Dropdown geöffnet, wenn Sie darauf klicken

Wenn die Dropdown-Liste sichtbar ist und ich außerhalb der Dropdown-Liste klicke, wird sie geschlossen. Ich brauche es nicht zu schließen.

Aus der Dokumentation:

Wenn es geöffnet wird, fügt das Plugin .dropdown-backdrop als Klickbereich zum Schließen von Dropdown-Menüs hinzu, wenn Sie außerhalb des Menüs klicken.

Welches JavaScript kann ich hinzufügen, um das Schließen der Dropdown-Liste zu verhindern?

33
kleban

Aus dem Ereignisabschnitt der Bootstrapdropdown Dokumentation:

hide.bs.dropdown: Dieses Ereignis wird sofort ausgelöst, wenn die Hide-Instance-Methode aufgerufen wurde.

Um zu verhindern, dass die Dropdown-Liste geschlossen wird, können Sie diesem Ereignis nur zuhören und es durch die Rückgabe von false unterbinden.

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

Für eine vollständige Lösung möchten Sie wahrscheinlich zulassen, dass sie geschlossen wird, wenn auf das Dropdown-Menü geklickt wird. Also nur einige Zeit wollen wir verhindern, dass die Box geschlossen wird. 

Dazu setzen wir .data() in zwei weitere Ereignisse, die durch das Dropdown ausgelöst werden:

  • shown.bs.dropdown - Wenn angezeigt, setzen wir .data('closable') auf false.
  • click - Wenn Sie darauf klicken, setzen wir .data('closable') auf true.

Wenn also das hide.bs.dropdown-Ereignis in der Dropdown-Liste von einer click ausgelöst wurde, erlauben wir ein Schließen.

Live Demo 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 _ ​​(Hinweis: Ich habe die Klasse keep-open zum Dropdown hinzugefügt)}

<div class="dropdown keep-open">
    <!-- Dropdown Button -->
    <button id="dLabel" role="button" href="#" class="btn btn-primary"
            data-toggle="dropdown" data-target="#" >
        Dropdown <span class="caret"></span>
    </button>

    <!-- Dropdown Menu -->
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
91
KyleMit

Versionsänderungen in einigen Abhängigkeiten haben dazu geführt, dass KyleMits und die meisten anderen Lösungen nicht mehr funktionieren. Ich habe ein wenig weiter gegraben, und aus irgendeinem Grund wird eine click() gesendet, wenn Bootstrap versucht und fehlschlägt, hide.bs.dropdown, gefolgt von einem weiteren Aufruf von hide.bs.dropdown. Ich bin um dieses Problem herumgekommen, indem ich das Schließen der Funktion click() auf der Schaltfläche selbst erzwinge, nicht das gesamte Dropdown-Menü. 

Live Demo 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

<h2>Click the dropdown button </h2>
<p>It will stay open unless clicked again to close </p>

<div class="dropdown keep-open">
    <!-- Dropdown Button -->
    <button id="dLabel" role="button" href="#" data-toggle="dropdown" data-target="#" class="btn btn-primary">
        Dropdown <span class="caret"></span>
    </button>

    <!-- Dropdown Menu -->
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
12
Mike Kane

$('.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;
}
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<h2>Click the dropdown button </h2>
<p>It will stay open unless clicked again to close </p>

<div class="dropdown keep-open">
    <!-- Dropdown Button -->
    <button id="dLabel" role="button" href="#"
       data-toggle="dropdown" data-target="#" 
       class="btn btn-primary">
        Dropdown <span class="caret"></span>
    </button>
    
    <!-- Dropdown Menu -->
    <ul class="dropdown-menu" role="menu" 
        aria-labelledby="dLabel">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>




<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/19740121/1366033'>Keep dropdown menu open</a><br/>
    Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
    Bootstrap Documentation: <a href='http://getbootstrap.com/javascript/#dropdowns'>Dropdowns</a><br/>
<div>

3
bhavik

Ich habe eine Lösung gefunden, die keine neuen Js erfordert. Verwenden Sie kein Dropdown und verwenden Sie stattdessen Bootstrap Collapse. Ich benutze immer noch einige Dropdown-Klassen, um es wie ein Dropdown zu gestalten.

<div class="dropdown">
    <button class="dropdown-toggle" type="button" data-toggle="collapse" data-target="#myList">Drop Down
    <span class="caret"></span></button>
    <div id="myList" class="dropdown-menu">
        <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
        <input type="checkbox" name="vehicle" value="Car"> I have a car<br></div>
2
andrew dibiasio

Ich habe es geschafft, eine Kombination der oben genannten Lösung von KyleMitt zu verwenden, und stieß bei der Verwendung dieses Objekts in einem Footable-Objekt auf Probleme (ich glaube, das liegt an der dynamischen Erstellung der Tabelle). Ich habe .keep-open auf die oberste Ebene von .dropdown .div angewendet.

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

Mit der Funktionalität dieses Codes können Sie nach außen klicken, um die Dropdown-Liste zu schließen. Wenn Sie jedoch auf die darin enthaltenen Elemente klicken, bleibt das Fenster geöffnet. Bitte lassen Sie mich wissen, wenn Sie Anregungen/Kommentare dazu haben und ich werde versuchen, sie zu bearbeiten.

1
Honga

Andere Lösung dafür. Lassen Sie das Dropdown-Menü nach dem Klicken in das Dropdown-Menü geöffnet:

$('.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;}
});
0
Tomasz Majerski

Lassen Sie das Dropdown-Menü geöffnet, nachdem Sie auf das Dropdown-Menü geklickt haben

  $(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");
0
Arron Mabrey