Question

我用一个boot子把 drop倒作为购物。在购物车中,是一种冲销产品纽顿(连接)。如果我点击,我的购物包裹就把产品移走,但菜单消失。是否有办法防止这种情况? 我曾尝试过启动程序,但这似乎不可行:

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

由于你能够看到按等级划分的排泄成分,因此该元素的下降。另一种想法是,我刚刚重新开始点击方案。因此,如果有人能够解释我如何从方案上打开诱杀装置,那将非常有益!

Answer 1

ry removing propagat propagat:

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

Edit

下面是对上述解决办法的评论的解调:

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

相关守则:

<>JS

$(".removefromcart").on("click", function(e){
    var fadeDelete = $(this).parents( .product );
    $(fadeDelete).fadeOut(function() {
        $(this).remove();
    });

    e.stopPropagation();
});

<><><><>>><>>>>><>>>>>>>

<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

在4号boot子里,当你把一个表格放在倒塌的菜单内时,它当被点击时就赢得了 t倒。

因此,这对我来说是最好的:

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

Answer 3

答案只是对接受的答复的副意。由于欧佩斯和安德烈斯都为这一Q &A,它解决了我的问题。然而,后来,我需要一些在我倒台时充满活力的附加项目。任何人如果越过这一办法,也可能会对变式的安德烈斯解决办法感兴趣,这种解决办法既符合最初的内容,也符合页后倒塌的因素:

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

或者,对于有活力的下降男子来说:

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

然后仅将<代码>数据-keepOpen OnClick在<li> tags or its child elements,视您的情况而定。 E.G.:

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

简言之, 你可以尝试这样做。它正在为我工作。

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

Answer 5

页: 1 等到菜单上课,因此,你可以在不使用<条码>数据-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 )
})

Try this in codepen 。

Answer 6

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:

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

您可替换[data-toggle=“collapse”]。 IsTnt为这样做增加了财产。

Answer 7

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);
});

Answer 8

《从第5号诱杀装置》中找到了这方面的一个选择:data-bs-auto-close=“outside”。

https://getbootstrap.com/docs/5.3/components/dropdowns/#auto-close-behavior

友情链接