我使用引导目录作为购物车。在购物车中有一个“删除产品”按钮(一个链接)。如果我点击它,我的购物车脚本会删除产品,但菜单会消失。有什么方法可以防止这种情况吗?我尝试了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:
€ 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: € 43,00</a></li>
<li><a href="/checkout">Checkout</a></li>
</ul>
</li>
</ul>
字符串
正如你所看到的,class=“dropdown-toggle”的元素使它成为一个 Bootstrap 。另一个想法是,我只是在编程方式下点击它重新打开它。所以如果有人能告诉我如何编程方式打开一个Bootstrap Bootstrap ,它会很有帮助!
8条答案
按热度按时间tjvv9vkg1#
尝试删除按钮本身的传播,如下所示:
字符串
编辑
下面是一个来自上面的解决方案的评论的演示:
http://jsfiddle.net/andresilich/E9mpu/
相关编码:
JS
型
HTML格式
型
pprl5pva2#
这个答案只是接受答案的一个旁注。感谢OP和Andres的这个Q & A,它解决了我的问题。然而,后来,我需要一些可以在我的页面中动态添加项目的东西。任何遇到这个的人可能也会对Andres的解决方案的变体感兴趣,它既可以使用初始元素,也可以在页面加载后添加到页面中的元素:
字符串
或者,对于动态创建的菜单:
型
然后根据您的情况,将
data-keepOpenOnClick
属性放在任何<li>
标签或其子元素中的任何位置。例如:型
wxclj1h53#
在bootstrap 4上,当你把一个表单放在菜单中时,当点击它时它不会折叠。
这对我来说是最好的:
字符串
tuwxkamq4#
简而言之,你可以试试这个。它对我很有效。
字符串
h43kikqp5#
当你给菜单给予
show
类时,菜单就会打开,所以你可以自己实现函数而不需要使用data-toggle="dropdown"
。在codepen中尝试此操作。
lymgl2op6#
我在Bootstrap 3中的下拉菜单中嵌套了一个 accordion /切换子菜单,也遇到了同样的问题。从源代码中借用了这个语法来阻止所有的折叠切换关闭下拉菜单:
字符串
你可以用任何你想停止关闭表单的东西来替换
[data-toggle="collapse"]
,类似于@DonamiteIsTNT添加属性来完成这一操作。zu0ti5jz7#
我写了几行代码,使它的工作完美,因为我们需要更多的控制:
字符串
m528fe3b8#
从Bootstrap 5开始,在选项中有一个设置:
data-bs-auto-close="outside"
。https://getbootstrap.com/docs/5.3/components/dropdowns/#auto-close-behavior