web-dev-qa-db-fra.com

Garder la liste déroulante Bootstrap ouverte au clic

J'utilise un menu déroulant bootstrap comme panier d'achat. Le panier contient un bouton "Supprimer le produit" (un lien). Si je clique dessus, mon script de caddie supprime le produit, mais le menu disparaît. Y a-t-il un moyen d'éviter cela? J'ai essayé e.startPropagation, mais cela ne semblait pas fonctionner:

<div id="shoppingcart" class="nav-collapse cart-collapse">
 <ul class="nav pull-right">
  <li class="dropdown open">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Totaal:
    &acirc;&sbquo;&not; 43,00</a>

    <ul class="dropdown-menu">
      <li class="nav-header">Pakketten</li>

      <li>
       <span class="quantity">1x</span>
       <span class="product-name">Test Product </span>
       <span class="product-remove"><a class="removefromcart" packageid="4" href="#">x</a>
        </span></li>

      <li><a href="#">Total: &euro; 43,00</a></li>

      <li><a href="/checkout">Checkout</a></li>
    </ul>
  </li>
</ul>

Comme vous pouvez le voir, l'élément avec class = "dropwdown-toggle" en a fait un menu déroulant. Une autre idée était que je la rouvrais simplement en cliquant par programme. Donc, si quelqu'un peut m'expliquer comment ouvrir par programmation un menu déroulant Bootstrap, cela aiderait!

jquerytwitter-bootstrap
63
Marten Sytema

Essayez de supprimer la propagation sur le bouton lui-même comme suit:

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

Modifier

Voici une démo des commentaires avec la solution ci-dessus:

http://jsfiddle.net/andresilich/E9mpu/

Code pertinent:

JS

$(".removefromcart").on("click", function(e){
    var fadeDelete = $(this).parents('.product');
    $(fadeDelete).fadeOut(function() {
        $(this).remove();
    });

    e.stopPropagation();
});

HTML

<div id="shoppingcart" class="nav-collapse cart-collapse">
 <ul class="nav pull-right">
  <li class="dropdown open">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Totaal:
    &acirc;&sbquo;&not; 43,00</a>

    <ul class="dropdown-menu">
      <li class="nav-header">Pakketten</li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">1</span></span>
        </li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">10</span></span>
        </li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">8</span></span>
        </li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">3</span></span>
        </li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">4</span></span>
        </li>
        <li class="divider"></li>
        <li><a href="#">Total: &euro; 43,00</a></li>
        <li><a href="/checkout">Checkout</a></li>
    </ul>
  </li>
</ul>
85
Andres Ilich

Cette réponse est juste un sidenote à la réponse acceptée. Merci à l'OP et à Andres pour ce Q & A, cela a résolu mon problème. Plus tard, cependant, j'avais besoin de quelque chose qui fonctionne avec des éléments ajoutés dynamiquement dans ma liste déroulante. Toute personne rencontrant celui-ci pourrait également être intéressée par une variante de la solution d'Andres qui fonctionne aussi bien avec les éléments initiaux que ceux ajoutés au menu déroulant après le chargement de la page:

$(function() {
    $("ul.dropdown-menu").on("click", "[data-keepOpenOnClick]", function(e) {
        e.stopPropagation();
    });
});

Ou, pour les menus déroulants créés dynamiquement:

$(document).delegate("ul.dropdown-menu [data-keepOpenOnClick]", "click", function(e) {
    e.stopPropagation();
});

Ensuite, placez l'attribut data-keepOpenOnClick n'importe où dans l'une des balises <li> ou ses éléments enfants, en fonction de votre situation. PAR EXEMPLE.:

<ul class="dropdown-menu">
    <li>
        <-- EG 1: Do not close when clicking on the link -->
        <a href="#" data-keepOpenOnClick>
            ...
        </a>
    </li>
    <li>
        <-- EG 2: Do not close when clicking the checkbox -->
        <input type="checkbox" data-keepOpenOnClick> Pizza
    </li>

    <-- EG 3: Do not close when clicking the entire LI -->
    <li data-keepOpenOnClick>
        ...
    </li>
</ul>
31
DonVaughn

En bref, vous pouvez essayer cela. Ça marche pour moi.

<span class="product-remove">
  <a class="removefromcart" onclick=" event.stopPropagation();" packageid="4" href="#">x</a>
  </span>
11
user3852635

Au démarrage 4, lorsque vous insérez un formulaire dans le menu déroulant, celui-ci ne s'effondrera pas si vous cliquez dessus.

Donc, cela a fonctionné mieux pour moi:

<div class="dropdown">
    <!-- toggle button/link -->
    <div class="dropdown-menu">
        <form>
            <!-- content -->
        </form>
    </div>
</div>
4
hugo_leonardo

J'avais le même problème avec un sous-menu accordéon/bascule qui était imbriqué dans un menu déroulant dans Bootstrap 3. Emprunté cette syntaxe à partir du code source pour arrêter toutes les fermetures de fermeture fermer le menu déroulant:

$(document).on(
    'click.bs.dropdown.data-api', 
    '[data-toggle="collapse"]', 
    function (e) { e.stopPropagation() }
);

Vous pouvez remplacer [data-toggle="collapse"] par ce que vous souhaitez arrêter de fermer, de la même manière que @DonamiteIsTnt a ajouté une propriété pour le faire.

2
Astockwell

J'ai écrit quelques lignes de code qui le rendent aussi parfait que nécessaire, avec plus de contrôle:

$(".dropdown_select").on('hidden.bs.dropdown', function () {
    if($(this).attr("keep-open") == "true") {
        $(this).addClass("open");
        $(this).removeAttr("keep-open");
    }
});

$(".dropdown_select ul li").bind("click", function (e) {
    // DO WHATEVER YOU WANT
    $(".dropdown_select").attr("keep-open", true);
});
1
user2991574

Le menu s'ouvre lorsque vous lui attribuez la classe show afin que vous puissiez implémenter la fonction vous-même sans utiliser data-toggle="dropdown".

<div class="dropdown">
  <button class="btn btn-secondary" type="button">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <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>
<div id="overlay"></div>

#overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
}

#overlay.show{
  display: block;
}

.dropdown-menu{
  z-index: 1001;
}

$('button, #overlay').on('click', function(){
  $('.dropdown-menu, #overlay').toggleClass('show')
})

Essayez ceci dans codepen .

0
Masamoto Miyata