Garder la liste déroulante Bootstrap ouverte au clic

Question

J'utilise un bootstrap déroulant comme un shoppingcart. Dans le panier d'achat est un "supprimer un produit" bouton (un lien). Si je clique dessus, mon shoppingcart script supprime le produit, mais le menu disparaît. Est-il de toute façon façon d'éviter cela? J'ai essayé de l'e.startPropagation, mais cela ne semble 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="http://stackoverflow.com/checkout">Checkout</a></li>
    </ul>
  </li>
</ul>

Comme vous pouvez le voir tha élément class="liste déroulante-bascule" a une liste déroulante. Une autre idée était que je viens de rouvrir en cliquant sur la programmation. Donc, si quelqu'un peut m'expliquer comment ouvrir par programmation un fichier d'amorce liste déroulante, cela aiderait bien!

Answer 1

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="http://stackoverflow.com/checkout">Checkout</a></li>
    </ul>
  </li>
</ul>
 

Answer 2

Cette réponse, c'est juste un passage de la réponse correcte. Grâce à l'OP et Andres pour ce Q & A, il a résolu mon problème. Plus tard, cependant, j'ai besoin de quelque chose qui a travaillé avec statique et dynamique des éléments dans ma liste déroulante. Toute personne venant à travers celui-ci peut également être intéressé par une variation Andres solution qui fonctionne également avec des éléments ajoutés à la liste déroulante fois la page chargée:

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

Ensuite, il suffit de mettre la data-stopPropagation attribut n'importe où dans une de la <li> de tags ou de ses éléments enfant, en fonction de votre situation. E. G.:

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

    <-- EG 3: Do not close when clicking the entire LI -->
    <li data-stopPropagation="true">
        ...
    </li>
</ul>

Answer 3

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>
 

Answer 4

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 du code source pour empêcher toutes les fermetures de réduction de fermer la liste déroulante:

 $(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.