Garder Bootstrap Déroulante Ouvrir Lorsque Vous Cliquez Dessus Off

De la section événements de la Bootstrap liste déroulante documentation:

hide.bs.dropdown: Cet événement est déclenché immédiatement lorsque le cacher méthode d'instance a été appelé.

Pour commencer, afin de prévenir le menu déroulant à partir de la fermeture, il suffit d'écouter cet événement et l'empêcher de procéder par renvoi de false:

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

---

Pour une solution complète, vous voulez probablement pour l'autoriser à se fermer lorsque la liste déroulante lui-même est cliqué. Si seulement de temps en temps, nous voulons empêcher la fermeture du boîtier.

Pour ce faire, nous allons mettre en .de données() des drapeaux dans les deux autres événements déclenchés par la liste déroulante:

• shown.bs.dropdown - Lorsque indiqué, nous allons mettre en .data('closable') à false
• click - Quand on clique dessus, nous allons mettre en .data('closable') à true

Ainsi, si le hide.bs.dropdown événement a été soulevée par un click sur la liste déroulante, nous allons permettre à un proche.

Démonstration en direct dans 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 (remarque j'ai ajouté de la classe keep-open de la liste déroulante)

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

JS:

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

CSS:

body {
    margin: 10px;
}

HTML:

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

J'ai réussi à utiliser une combinaison de KyleMitt la solution ci-dessus et a couru dans des problèmes lors de l'utilisation de ce dans une Footable objet (je crois que c'est en raison de la dynamique de la création de la table). J'ai appliqué .gardez-ouvert à l' .liste déroulante .div au plus haut niveau.

$('#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 fonctionnalité de ce code vous permet de cliquer en dehors de fermer la liste déroulante, mais en cliquant sur les éléments à l'intérieur il continuera de l'être ouverte. S'il vous plaît laissez-moi savoir si vous avez des suggestions ou des commentaires sur ce sujet et je vais essayer de les modifier.

Garder déroulante ouverte après le clic à l'intérieur .dropdown-menu

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