单击时保持Bootstrap打开

eufgjt7s  于 2023-11-15  发布在  Bootstrap
关注(0)|答案(8)|浏览(166)

我使用引导目录作为购物车。在购物车中有一个“删除产品”按钮(一个链接)。如果我点击它,我的购物车脚本会删除产品,但菜单会消失。有什么方法可以防止这种情况吗?我尝试了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=“dropdown-toggle”的元素使它成为一个 Bootstrap 。另一个想法是,我只是在编程方式下点击它重新打开它。所以如果有人能告诉我如何编程方式打开一个Bootstrap Bootstrap ,它会很有帮助!

tjvv9vkg

tjvv9vkg1#

尝试删除按钮本身的传播,如下所示:

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

pprl5pva

pprl5pva2#

这个答案只是接受答案的一个旁注。感谢OP和Andres的这个Q & A,它解决了我的问题。然而,后来,我需要一些可以在我的页面中动态添加项目的东西。任何遇到这个的人可能也会对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>

wxclj1h5

wxclj1h53#

在bootstrap 4上,当你把一个表单放在菜单中时,当点击它时它不会折叠。
这对我来说是最好的:

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

字符串

tuwxkamq

tuwxkamq4#

简而言之,你可以试试这个。它对我很有效。

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

字符串

h43kikqp

h43kikqp5#

当你给菜单给予show类时,菜单就会打开,所以你可以自己实现函数而不需要使用data-toggle="dropdown"

<div class="dropdown">
  <button class="btn btn-secondary" type="button">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
<div id="overlay"></div>
#overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
}

#overlay.show{
  display: block;
}

.dropdown-menu{
  z-index: 1001;
}
$('button, #overlay').on('click', function(){
  $('.dropdown-menu, #overlay').toggleClass('show')
})

codepen中尝试此操作。

lymgl2op

lymgl2op6#

我在Bootstrap 3中的下拉菜单中嵌套了一个 accordion /切换子菜单,也遇到了同样的问题。从源代码中借用了这个语法来阻止所有的折叠切换关闭下拉菜单:

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

字符串
你可以用任何你想停止关闭表单的东西来替换[data-toggle="collapse"],类似于@DonamiteIsTNT添加属性来完成这一操作。

zu0ti5jz

zu0ti5jz7#

我写了几行代码,使它的工作完美,因为我们需要更多的控制:

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

字符串

m528fe3b

m528fe3b8#

从Bootstrap 5开始,在选项中有一个设置:data-bs-auto-close="outside"
https://getbootstrap.com/docs/5.3/components/dropdowns/#auto-close-behavior

相关问题