クリック時にブートストラップのドロップダウンを開いたままにする

Question

私はショッピングカートとしてブートストラップのドロップダウンを使用します。ショッピングカートには「製品を取り除く」ボタン（リンク）があります。私がクリックすると、私のshoppingcartスクリプトは製品を削除しますが、メニューは消えてしまいます。これを防ぐ方法はありますか？私はe.startPropagationを試してみましたが、それは動作していないようでした：あなたは、クラス=「dropwdown-トグル」とTHA要素を見ることができるように

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

はドロップダウンしました。もう一つのアイデアは、プログラムでクリックするだけで再び開くことでした。だから誰かがブートストラップのプルダウンをプログラムで開く方法を私に説明することができれば、それはうまくいくでしょう！

Answer 1

そうのようなボタン自体に伝播を削除してください：

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

：ここ

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

編集

は、上記の溶液とのコメントからデモです関連コード：

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> 

Answer 2

この回答は受け入れ答えにだけ追記です。このQ & AのためのOPとAndresのおかげで、それは私の問題を解決しました。後で、私はドロップダウンに動的に追加された項目を扱うものが必要でした。動的に作成されたドロップダウンメニューの、

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

をまたは：ページがロードされた後、この1渡って来て、誰でもまた、ドロップダウンに追加された要素だけでなく、最初の要素との両方で動作しますバリエーションアンドレスのソリューションに興味があるかもしれません：

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

は、それからちょうどあなたの状況に応じて、<li>タグまたはその子要素のいずれかの任意の場所にdata-keepOpenOnClick属性を置きます。 EG：

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

Answer 3

私は/ブートストラップ3のドロップダウン・メニュー内にネストされたサブメニューがドロップダウンを閉じてから、すべての崩壊のトグルを停止するsource codeからこの構文を借用切り替えるアコーディオンと同じ問題を抱えていました：

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

あなたは@DonamiteIsTntがそうするプロパティを追加する方法と同様の形式を閉じる停止したいものは何でもして[data-toggle="collapse"]を置き換えることができます。

Answer 4

要するに、これを試すことができます。それは私のために働いています。

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

Answer 5

私はそれは我々がそれのコントロールのより多くを必要とするほど完璧に動作させるコードのいくつかの行に書いた：、ドロップダウンメニュー内のフォームを入れてブートストラップ4、上

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

Answer 6

をそれをクリックすると崩壊しません。

だから、これは私のために最高の仕事を：

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