保持引导下拉下拉打开。

I use a bootstrap dropdown as a shoppingcart. In the shopping cart is a 'remove product' button (a link). If I click it, my shoppingcart script removes the product, but the menu fades away. Is there anyway way to prevent this? I tried e.startPropagation, but that didn't seem to work:

我使用bootstrap下拉作为购物车。在购物车中是“删除产品”按钮(链接)。如果我点击它，我的shoppingcart脚本会删除该产品，但菜单会消失。有没有办法防止这种情况发生?我试着e。开始传播，但那似乎没有效果:

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

As you can see tha element with class="dropwdown-toggle" made it a dropdown. Another idea was that I just reopen it on clicking programmatically. So if someone can explain me how to programmatically open a Bootstrap dropdown, it would help well!

您可以看到带有class="dropwdown-toggle"的元素使其成为下拉菜单。另一个想法是，我只是重新打开它以编程方式点击。因此，如果有人能够解释如何以编程方式打开引导下拉菜单，它将会很有帮助!

6 个解决方案

#1

Try removing the propagation on the button itself like so:

尝试删除按钮本身的传播:

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

Edit

编辑

Here is a demo from the comments with the solution above:

下面是对上述解决方案的评论:

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

Relevant code:

#2

This answer is just a sidenote to the accepted answer. Thanks to both the OP and Andres for this Q & A, it solved my problem. Later, however, I needed something that worked with dynamically added items in my dropdown. Anyone coming across this one might also be interested in a variation Andres' solution that works both with the initial elements as well as elements added to the dropdown after the page has loaded:

这个答案只是一个旁注。感谢OP和Andres为这个Q & A，它解决了我的问题。然而，后来，我需要一些在我的下拉菜单中动态添加的项目。任何遇到这个问题的人都可能对一个变体Andres的解决方案感兴趣，该解决方案既适用于初始元素，也适用于在页面加载后添加到下拉列表中的元素:

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

Or, for dynamically created dropdown menus:

或者，对于动态创建下拉菜单:

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

Then just put the data-keepOpenOnClick attribute anywhere in any of the <li> tags or its child elements, depending on your situation. E.G.:

然后，根据您的情况，将data-keepOpenOnClick属性放在任何

标记或其子元素的任何位置。例如:

标记或其子元素的任何位置,例如:

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

#3

In short, You can try this. It is working for me.

简而言之，你可以试试这个。它在为我工作。

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

#4

I was having the same problem with an accordion/toggle sub-menu that was nested within a dropdown-menu in Bootstrap 3. Borrowed this syntax from the source code to stop all collapse toggles from closing the dropdown:

我遇到了同样的问题，在Bootstrap 3的下拉菜单中嵌套了accordion/toggle子菜单。从源代码中借用了此语法，以阻止所有崩溃切换到关闭下拉列表:

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

You can replace [data-toggle="collapse"] with whatever you want to stop closing the form, similar to how @DonamiteIsTnt added a property to do so.

你可以用任何你想要停止关闭表单的方式来替换[数据切换="崩溃"]，类似于@DonamiteIsTnt添加一个属性来这样做。

#5

I wrote some lines of code that make it works as perfect as we need with more of control on it:

我写了几行代码，使它能完美地工作，就像我们需要更多的控制一样:

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

#6

On bootstrap 4, when you put a form inside the dropdown menu, it won't collapse when clicking inside of it.

在bootstrap 4中，当你在下拉菜单中放入一个表单时，当点击它的内部时它不会崩溃。

So this worked best for me:

所以这对我来说是最有效的:

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

#1