保持引导下拉菜单点击打开

问题描述：

我使用引导下拉菜单作为购物车。购物车中有一个“删除产品”按钮（链接）。如果我点击它，我的购物车脚本将删除该产品，但菜单消失。有没有办法来防止这种情况？我试过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拨动”塔元素使它下拉。另一个想法是，我只是以编程方式重新打开它。所以，如果有人能解释我如何以编程方式打开Bootstrap下拉菜单，这将有所帮助！

我看你已经有一个答案，但有一个更简单的方法。只需在表单标签中包装菜单的内容即可。而已。因此，不要使用'ul.dropdown-menu'，而是使用'form.dropdown-menu> ul'。 – rdumont

答

尝试在按钮本身去除传播像这样：

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

编辑

这里是从与上述方案中的注释演示：

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

相关代码：

个

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

好的，这个工作，但现在删除按钮不工作了，我可以想到我的自我。所以可能我需要以编程方式重新打开div。任何想法如何做到这一点？ –

@MartenSytema，这一切都取决于你如何从菜单中删除产品，但以此为例：http://jsfiddle.net/andresilich/E9mpu/，请注意我是如何实现'.stopPropagation（）'方法与删除脚本。 –

感谢您的帮助！唯一的问题是我需要使用实时jquery方法来绑定click事件，正如jQuery所说：_Sive（）方法处理事件，一旦它们传播到文档的顶部，就不可能停止传播现场活动。[链接]（http://api.jquery.com/event.stopPropagation/） –

答

这个答案只是一个旁注，以接受的答案。感谢这个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>标签或它的子元素的任何地方属性，根据您的情况。 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>

答

我是有一个手风琴/切换被嵌套在引导3下拉菜单从source code借用了这个语法内停止所有坍塌关闭下拉切换子菜单同样的问题：

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

您可以替换[data-toggle="collapse"]与任何你想停止关闭形式，类似于@DonamiteIsTnt怎么加属性这么做。

答

总之，你可以试试这个。它为我工作。

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

答

我写了一些代码，使得它的工作原理是完美的，因为我们需要对更多的控制权的：

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

答

在引导4，当你把一个表格的下拉菜单里，点击内部时它不会崩溃。

所以这个工作最适合我：

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

保持引导下拉菜单点击打开

相关推荐