jquery - クリック時に Bootstrap ドロップダウンを開いたままにする

Question

ブートストラップ ドロップダウンをショッピングカートとして使用します。ショッピング カートには、「商品を削除する」ボタン (リンク) があります。クリックすると、shoppingcart スクリプトが商品を削除しますが、メニューはフェードアウトします。とにかくこれを防ぐ方法はありますか？e.startPropagation を試しましたが、うまくいかなかったようです:

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

ご覧のとおり、class="dropwdown-toggle" の要素がドロップダウンになりました。もう 1 つのアイデアは、プログラムでクリックして再度開くというものでした。したがって、プログラムで Bootstrap ドロップダウンを開く方法を誰かが説明してくれれば、とても助かります!

Answer 1

次のように、ボタン自体の伝播を削除してみてください。

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

編集

上記の解決策のコメントからのデモは次のとおりです。

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

関連コード：

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 の両方のおかげで、私の問題は解決しました。しかし後で、ドロップダウンに動的に追加されたアイテムを操作できるものが必要になりました。これに出くわした人は、ページがロードされた後にドロップダウンに追加された要素だけでなく、初期要素の両方でも機能する Andres のソリューションのバリエーションにも興味があるかもしれません。

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

または、動的に作成されたドロップダウン メニューの場合:

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

次に、状況に応じてdata-keepOpenOnClick、タグまたはその子要素の任意の場所に属性を配置します。<li>例えば：

<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

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

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

Answer 4

Bootstrap 3 のドロップダウン メニュー内にネストされたアコーディオン/トグル サブメニューで同じ問題が発生していました。ソース コードからこの構文を借用して、すべての折りたたみトグルがドロップダウンを閉じないようにしました。

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

[data-toggle="collapse"]@DonamiteIsTnt がプロパティを追加したのと同様に、フォームを閉じるのを止めたいものに置き換えることができます。

Answer 5

必要に応じて完璧に動作するように、より細かく制御できるコード行をいくつか書きました。

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