it-swarm.com.de

Vermeiden Sie das Dropdown-Menü beim Klicken innerhalb

Ich habe ein Twitter-Bootstrap-Dropdown-Menü. Wie alle Twitter Bootstrap-Benutzer wissen, wird das Dropdown-Menü beim Klicken geschlossen (sogar beim Klicken).

Um dies zu vermeiden, kann ich auf einfache Weise einen Click-Ereignishandler im Dropdown-Menü anhängen und einfach die berühmte event.stopPropagation() hinzufügen. 

<ul class="nav navbar-nav">
  <li class="dropdown mega-dropdown">
    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
      <i class="fa fa-list-alt"></i> Menu item 1
      <span class="fa fa-chevron-down pull-right"></span>
    </a>
    <ul class="dropdown-menu mega-dropdown-menu">
      <li>
        <div id="carousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-slide-to="0" data-target="#carousel"></li>
            <li class="active" data-slide-to="1" data-target="#carousel"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item">
              <img alt="" class="img-rounded" src="img1.jpg">
            </div>
            <div class="item active">
              <img alt="" class="img-rounded" src="img2.jpg">
            </div>
          </div>
          <a data-slide="prev" role="button" href="#carousel" 
             class="left carousel-control">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a data-slide="next" role="button" href="#carousel" 
             class="right carousel-control">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
      </li>
    </ul>
  </li>
</ul>

Dies sieht jedoch einfach und ein sehr allgemeines Verhalten aus, und da carousel-controls (sowie carousel indicators) Ereignisbehandlungsroutinen an das document-Objekt delegiert werden, wird das click-Ereignis für diese Elemente (prev/next Steuerelemente, ...) verwendet ignoriert werden".

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    // The event won't be propagated up to the document NODE and 
    // therefore delegated events won't be fired
    event.stopPropagation();
});

Das Verlassen auf Twitter Bootstrap-Dropdown hide/hidden -Ereignisse ist aus den folgenden Gründen keine Lösung:

  • Das bereitgestellte Ereignis für beide Ereignishandler gibt Ihnen keinen Verweis auf das angeklickte Element
  • Der Inhalt des Dropdown-Menüs wird dynamisch generiert, sodass das Hinzufügen einer flag-Klasse nicht möglich ist

Diese Geige ist das normale Verhalten und diese Geige wird mit event.stopPropagation() hinzugefügt.

Aktualisieren

Danke an Roman für seine Antwort . Ich habe auch eine Antwort gefunden, die Sie unter finden können.

239
php-dev

Das Entfernen des Datenattributs data-toggle="dropdown" und das Implementieren des Öffnens/Schließens der Dropdown-Liste kann eine Lösung sein.

Zuerst indem Sie auf den Link klicken, um das Dropdown-Menü wie folgt zu öffnen/schließen:

$('li.dropdown.mega-dropdown a').on('click', function (event) {
    $(this).parent().toggleClass('open');
});

und dann hören Sie die Klicks außerhalb des Dropdown-Menüs, um es wie folgt zu schließen:

$('body').on('click', function (e) {
    if (!$('li.dropdown.mega-dropdown').is(e.target) 
        && $('li.dropdown.mega-dropdown').has(e.target).length === 0 
        && $('.open').has(e.target).length === 0
    ) {
        $('li.dropdown.mega-dropdown').removeClass('open');
    }
});

Hier ist die Demo: http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/

323
Roma

Das sollte auch helfen

$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
  e.stopPropagation();
});
250
Arbejdsglæde

Bootstrap bietet folgende Funktionen:

                  | Dieses Ereignis wird sofort ausgelöst, wenn die Hide-Instanzmethode 
 Hide.bs.dropdown | genannt worden. Das umschaltbare Ankerelement ist als .__ verfügbar. | relatedTarget-Eigenschaft des Ereignisses.

Daher sollte die Implementierung dieser Funktion in der Lage sein, das Schließen des Dropdowns zu deaktivieren.

$('#myDropdown').on('hide.bs.dropdown', function (e) {
    var target = $(e.target);
    if(target.hasClass("keepopen") || target.parents(".keepopen").length){
        return false; // returning false should stop the dropdown from hiding.
    }else{
        return true;
    }
});
34
Vartan

Die absolut beste Antwort ist, ein Form-Tag hinter das Klassen-Dropdown-Menü zu setzen

so ist dein code

<ul class="dropdown-menu">
  <form>
    <li>
      <div class="menu-item">bla bla bla</div>
    </li>
  </form>
</ul>
26
user3287193

Ich habe auch eine Lösung gefunden.

Unter der Annahme, dass die Twitter Bootstrap Components-bezogenen Ereignishandler an das document-Objekt delegiert sind, durchlebe ich die angehängten Handler und überprüfe, ob das aktuell angeklickte Element (oder eines seiner übergeordneten Elemente) von einem delegierten Ereignis betroffen ist.

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    var events = $._data(document, 'events') || {};
    events = events.click || [];
    for(var i = 0; i < events.length; i++) {
        if(events[i].selector) {

            //Check if the clicked element matches the event selector
            if($(event.target).is(events[i].selector)) {
                events[i].handler.call(event.target, event);
            }

            // Check if any of the clicked element parents matches the 
            // delegated event selector (Emulating propagation)
            $(event.target).parents(events[i].selector).each(function(){
                events[i].handler.call(this, event);
            });
        }
    }
    event.stopPropagation(); //Always stop propagation
});

Hoffe, es hilft jedem, der nach einer ähnlichen Lösung sucht.

Vielen Dank für Ihre Hilfe.

25
php-dev
$('body').on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".open") && e.stopPropagation();
});

Dies kann für alle Bedingungen funktionieren.

19
Terry Lin

Das könnte helfen: 

$("dropdownmenuname").click(function(e){
   e.stopPropagation();
})
15
Bawantha

jQuery:

<script>
  $(document).on('click.bs.dropdown.data-api', '.dropdown.keep-inside-clicks-open', function (e) {
    e.stopPropagation();
  });
</script>

HTML:

<div class="dropdown keep-inside-clicks-open">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
     Dropdown Example
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Demo:

Generic: https://jsfiddle.net/kerryjohnson/omefq68b/1/

Ihre Demo mit dieser Lösung: http://jsfiddle.net/kerryjohnson/80oLdtbf/101/

9
Kerry Johnson

Bootstrap hat dieses Problem selbst gelöst, indem es <form> - Tags in Dropdown-Listen unterstützt. Ihre Lösung ist ziemlich verständlich und kann hier nachgelesen werden: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/dropdown.js

Es läuft darauf hinaus, die Weitergabe am document-Element zu verhindern und dies nur für Ereignisse des Typs 'click.bs.dropdown.data-api', Die mit dem Selektor '.dropdown .your-custom-class-for-keep-open-on-click-elements' Übereinstimmen.

Oder im Code

$(document).on('click.bs.dropdown.data-api', '.dropdown .keep-open-on-click', (event) => {
    event.stopPropagation();
});
4
Daniel Schlaug

Ich habe vor kurzem ein ähnliches Problem und habe verschiedene Wege zur Lösung des Problems gesucht, indem ich das Datenattribut data-toggle="dropdown" entfernte und click mit event.stopPropagation() aufrufte.

Der zweite Weg sieht besser aus. Auch Bootstrap-Entwickler verwenden diesen Weg ... In der Quelldatei fand ich die Initialisierung der Dropdown-Elemente:

// APPLY TO STANDARD DROPDOWN ELEMENTS
$(document)
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)
}(jQuery);

Also diese Zeile:

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

schlägt vor, dass Sie ein form-Element mit der Klasse .dropdown in den Container einfügen können, um das Schließen des Dropdown-Menüs zu vermeiden.

$('body').on("click", ".dropdown-menu", function (e) {
    $(this).parent().is(".show") && e.stopPropagation();
});

das funktioniert 2018

4
waza123
$('ul.nav.navbar-nav').on('click.bs.dropdown', function(e){
    var $a  = $(e.target), is_a = $a.is('.is_a');
    if($a.hasClass('dropdown-toggle')){   
        $('ul.dropdown-menu', this).toggle(!is_a);
        $a.toggleClass('is_a', !is_a);
    }
}).on('mouseleave', function(){
    $('ul.dropdown-menu',this).hide();
    $('.is_a', this).removeClass('is_a');
});

ich habe es noch einmal überarbeitet, um so intelligent und funktional wie möglich zu sein. Sie schließen jetzt, wenn Sie sich außerhalb des Navigationsbereichs bewegen, und bleiben geöffnet, während Sie sich darin befinden. einfach perfekt.

4
Luca Filosofi

Mit Angular2 Bootstrap können Sie nonInput für die meisten Szenarien verwenden:

<div dropdown autoClose="nonInput">

nonInput - (Standardeinstellung) schließt das Dropdown-Menü automatisch, wenn auf eines seiner Elemente geklickt wird, sofern es sich bei dem angeklickten Element nicht um eine Eingabe oder einen Textbereich handelt.

https://valor-software.com/ng2-bootstrap/#/dropdowns

3
Nir Soudry

Wie zum Beispiel hat Bootstrap 4 Alpha dieses Menüereignis. Warum nicht verwenden? 

// PREVENT INSIDE MEGA DROPDOWN
$('.dropdown-menu').on("click.bs.dropdown", function (e) {
    e.stopPropagation();
    e.preventDefault();                
});
3
Frank Thoeny

Sie können die Weitergabe durch Klicken auf das Dropdown-Menü stoppen und dann die Karussellsteuerelemente mithilfe der JavaScript-Methoden carousel - manuell neu implementieren.

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event) {
    event.stopPropagation();
});

$('a.left').click(function () {
    $('#carousel').carousel('prev');
});

$('a.right').click(function () {
    $('#carousel').carousel('next');
});

$('ol.carousel-indicators li').click(function (event) {
    var index = $(this).data("slide-to");
    $('#carousel').carousel(index);
});

Hier ist die jsfiddle .

3
Neil

Ich weiß, dass diese Frage speziell für jQuery war, aber für jeden, der AngularJS verwendet, bei dem dieses Problem auftritt, können Sie eine Direktive erstellen, die dies behandelt: 

angular.module('app').directive('dropdownPreventClose', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          element.on('click', function(e) {
            e.stopPropagation(); //prevent the default behavior of closing the dropdown-menu
          });
        }
    };
});

Fügen Sie dann einfach das Attribut dropdown-prevent-close zu Ihrem Element hinzu, das das Schließen des Menüs auslöst, und sollte dies verhindern. Für mich war es ein select Element, das das Menü automatisch schloss:

<div class="dropdown-menu">
  <select dropdown-prevent-close name="myInput" id="myInput" ng-model="myModel">
    <option value="">Select Me</option>
  </select>
</div>
2
jtate

[Bootstrap 4 Alpha 6] [Rails] Für Rails-Entwickler führt e.stopPropagation() zu unerwünschtem Verhalten für link_to, wobei data-method nicht gleich get ist, da alle Ihre Anforderungen standardmäßig als get zurückgegeben werden. 

Um dieses Problem zu beheben, schlage ich diese universelle Lösung vor

$('.dropdown .dropdown-menu').on('click.bs.dropdown', function() {
  return $('.dropdown').one('hide.bs.dropdown', function() {
    return false;
  });
});

$('.dropdown .dropdown-menu').on('click.bs.dropdown', function() {
  return $('.dropdown').one('hide.bs.dropdown', function() {
    return false;
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<ul class="nav navbar-nav">
  <li class="dropdown mega-dropdown">
    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
      <i class="fa fa-list-alt"></i> Menu item 1
      <span class="fa fa-chevron-down pull-right"></span>
    </a>
    <ul class="dropdown-menu mega-dropdown-menu">
      <li>
        <div id="carousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-slide-to="0" data-target="#carousel"></li>
            <li class="active" data-slide-to="1" data-target="#carousel"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item">
              <img alt="" class="img-rounded" src="img1.jpg">
            </div>
            <div class="item active">
              <img alt="" class="img-rounded" src="img2.jpg">
            </div>
          </div>
          <a data-slide="prev" role="button" href="#carousel" class="left carousel-control">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a data-slide="next" role="button" href="#carousel" class="right carousel-control">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
      </li>
    </ul>
  </li>
</ul>

2
Jacky Tong

Ich habe die Antwort von @ Vartan geändert, damit sie mit Bootstrap 4.3 funktioniert. Seine Lösung funktioniert mit der neuesten Version nicht mehr, da die Eigenschaft target immer den Stamm div der Dropdown-Liste zurückgibt, unabhängig davon, wo der Klick platziert wurde.

Hier ist der Code:

$('.dropdown-keep-open').on('hide.bs.dropdown', function (e) {
  if (!e.clickEvent) {
    // There is no `clickEvent` property in the `e` object when the `button` (or any other trigger) is clicked. 
    // What we usually want to happen in such situations is to hide the dropdown so we let it hide. 
    return true;
  }

  var target = $(e.clickEvent.target);

  return !(target.hasClass('dropdown-keep-open') || target.parents('.dropdown-keep-open').length);
});
<div class="dropdown dropdown-keep-open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
2
Konrad Kalemba

Platzieren Sie in .dropdown content die .keep-open-Klasse auf einem Etikett wie folgt:

$('.dropdown').on('click', function (e) {
    var target = $(e.target);
    var dropdown = target.closest('.dropdown');
    if (target.hasClass('keep-open')) {
        $(dropdown).addClass('keep-open');
    } else {
        $(dropdown).removeClass('keep-open');
    }
});

$(document).on('hide.bs.dropdown', function (e) {
    var target = $(e.target);
    if ($(target).is('.keep-open')) {
        return false
    }
});

In den vorherigen Fällen wurden die Ereignisse, die sich auf die Containerobjekte bezogen, vermieden. Jetzt erbt der Container die Klasse Keep-Open und prüft, bevor sie geschlossen wird.

Die einfachste Arbeitslösung für mich ist:

  • hinzufügen von keep-open-Klasse zu Elementen, die kein Schließen der Dropdown-Liste bewirken sollen
  • und dieses Stück Code erledigen den Rest:
$('.dropdown').on('click', function(e) {
    var target = $(e.target);
    var dropdown = target.closest('.dropdown');
    return !dropdown.hasClass('open') || !target.hasClass('keep-open');
});
1
Gee-Bee

Ich weiß, es gibt bereits eine vorherige Antwort, die die Verwendung eines Formulars vorschlägt, aber das bereitgestellte Markup ist nicht korrekt/ideal. Hier ist die einfachste Lösung, es wird kein Javascript benötigt und das Dropdown wird dadurch nicht beeinträchtigt. Funktioniert mit Bootstrap 4.

<form class="dropdown-item"> <!-- Your elements go here --> </form>

1
Radu Ciobanu

Ich habe festgestellt, dass keine der Lösungen funktionierte, da ich die Standard-Bootstrap-Navigation verwenden möchte. Hier ist meine Lösung für dieses Problem: 

       $(document).on('hide.bs.dropdown', function (e) {
        if ($(e.currentTarget.activeElement).hasClass('dropdown-toggle')) {
          $(e.relatedTarget).parent().removeClass('open');
          return true;
        }
        return false;
       });
1
Mike

Anstelle etwas Javascript oder Jquery-Code zu schreiben (das Rad neu zu erfinden). Das obige Szenario kann mit der Bootstrap-Option zum automatischen Schließen .. verwaltet werden. Sie können einen der Werte für auto-close angeben:

  1. always - (Default) schließt das Dropdown-Menü automatisch, wenn eines seiner Elemente angeklickt wird.

  2. outsideClick - schließt die Dropdown-Liste nur dann automatisch, wenn der Benutzer auf ein Element außerhalb der Dropdown-Liste klickt.

  3. disabled - Deaktiviert das automatische Schließen

Schauen Sie sich den folgenden Plan an:

http://plnkr.co/edit/gnU8M2fqlE0GscUQtCWa?p=preview

Einstellen

uib-dropdown auto-close="disabled" 

Hoffe das hilft :)

1
ashwaniKumar

Möglicherweise treten Probleme auf, wenn Sie die Methode return false oder stopPropagation () verwenden, da Ihre Ereignisse unterbrochen werden. Probieren Sie diesen Code aus, er funktioniert einwandfrei:

$(function() {
    $('.dropdown').on("click", function (e) {
            $('.keep-open').removeClass("show");
    });
    $('.dropdown-toggle').on("click", function () {
            $('.keep-open').addClass("show");
    });

    $( ".closeDropdown" ).click(function() {
        $('.dropdown').closeDropdown();
    });
});
jQuery.fn.extend({
    closeDropdown: function() {
        this.addClass('show')
            .removeClass("keep-open")
            .click()
            .addClass("keep-open");
    }
  });

In HTML:

<div class="dropdown keep-open" id="search-menu" >
    <button  class="btn dropdown-toggle btn  btn-primary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-filter fa-fw"></i> 
    </button>
    <div class="dropdown-menu">
        <button class="dropdown-item" id="opt1" type="button">Option 1</button>
        <button class="dropdown-item" id="opt2" type="button">Option 2</button>
        <button type="button" class="btn btn-primary closeDropdown">Close</button>
    </div>
</div>

Wenn Sie den Dropdrown schließen möchten:

`$('#search-menu').closeDropdown();`
0
Hchab
$(function() {
    $('.mega-dropdown').on('hide.bs.dropdown', function(e) {
        var $target = $(e.target);
        return !($target.hasClass("keep-open") || $target.parents(".keep-open").size() > 0);
    });

    $('.mega-dropdown > ul.dropdown-menu').on('mouseenter', function() {
        $(this).parent('li').addClass('keep-open')
    }).on('mouseleave', function() {
        $(this).parent('li').removeClass('keep-open')
    });
});
0
SNC

Um das Dropdown-Menü nur zu schließen, wenn ein Klickereignis außerhalb des Bootstrap-Dropdowns ausgelöst wurde, funktionierte dies für mich:

JS-Datei:

    $('.createNewElement').on('click.bs.dropdown.data-api', '.tags-btn-group.keep-open-dropdown', function (e) {
        var target = $(e.target);
        if (target.hasClass("dropdown-menu") || target.parents(".dropdown-menu").length) {
            e.stopPropagation();
        }
    });

HTML-Datei:

<!-- button: -->
<div class="createNewElement">
                <div class="btn-group tags-btn-group keep-open-dropdown">

                    <div class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">OPEN DROPDOWN</div>

                    <ul class="dropdown-menu">
                        WHAT EVER YOU WANT HERE...
                    </ul>

                </div>
</div>
0
Dudi

In Bootstrap 4 können Sie dies auch tun:

$('#dd-link').on('hide.bs.dropdown', onListHide)

function onListHide(e)
{
  if(e.clickEvent && $.contains(e.relatedTarget.parentNode, e.clickEvent.target)) {
  e.preventDefault()
  }
}

dabei ist #dd-link das Ankerelement oder die Schaltfläche mit der Eigenschaft data-toggle="drowndown".

0
Daniel

Sie müssen "Hold-on-Click" zur "Dropdown-Menü" -Klasse hinzufügen

0
chakroun yesser

Ich habe es damit gemacht:

$(element).on({
    'mouseenter': function(event) {
        $(event.currentTarget).data('mouseover', true);
    },
    'mouseleave': function(event) {
        $(event.currentTarget).data('mouseover', false);
    },
    'hide.bs.dropdown': function (event) {
        return !$(event.currentTarget).data('mouseover');
    }
});
0
William

Das hat mir geholfen,

$('.dropdown-menu').on('click', function (e) {
     if ($(this).parent().is(".open")) {
         var target = $(e.target);
         if (target.hasClass("keepopen") || target.parents(".keepopen").length){
                    return false; 
                }else{
                    return true;
                }
            }            
});

Ihr Dropdown-Menüelement muss so sein (notieren Sie sich die Klassen dropdown-menu und keepopen).

<ul role="menu" class="dropdown-menu topmenu-menu eserv_top_notifications keepopen">

Der obige Code verhindert, dass das ganze <body> abgewiesen wird, statt auf das specfic -Element mit der Klasse dropdown-menu.

Hoffe das hilft jemandem.

Vielen Dank.

0
Anjana Silva

Sie können den folgenden Code durchgehen, um dieses Problem zu lösen.

$(document).on('click.bs.dropdown.data-api', '.keep_it_open', function (e) {
  e.stopPropagation();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<div class="dropdown keep_it_open">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
      </div>
0
user2991213