点击时保持 Bootstrap 下拉菜单打开

Posted 2023-03-06

【中文标题】点击时保持 Bootstrap 下拉菜单打开

【英文标题】：Keep Bootstrap dropdown open on click

【发布时间】：2012-05-15 21:06:03

【问题描述】：

我使用引导下拉菜单作为购物车。购物车中有一个“删除产品”按钮（链接）。如果我单击它，我的购物车脚本会删除该产品，但菜单会消失。有没有办法防止这种情况发生？我尝试了 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-toggle" 的元素使其成为下拉菜单。另一个想法是我只是在以编程方式单击时重新打开它。因此，如果有人可以向我解释如何以编程方式打开 Bootstrap 下拉菜单，那将很有帮助！

【问题讨论】：

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

【参考方案1】：

尝试像这样删除按钮本身的传播：

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

编辑

这是来自 cmets 的演示，上面的解决方案：

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>

【讨论】：

好吧，这工作，但现在删除按钮不再工作，我可以想到我自己。所以可能我确实需要以编程方式重新打开 div。知道该怎么做吗？

@MartenSytema 这一切都取决于您如何从菜单中删除产品，但以此为例：jsfiddle.net/andresilich/E9mpu，请注意我如何实现 .stopPropagation() 方法以及删除脚本。

感谢您的帮助！唯一的问题是我需要使用实时 jquery 方法来绑定点击事件，正如 jQuery 所说：无法停止直播活动的传播。 link

@MartenSytema 两种方法都做同样的事情。此外，.live() 自 jQuery 版本 1.7 起已被弃用。

@MartenSytema 忘了说，.live() 被 .on() 取代了。

【参考方案2】：

此答案只是已接受答案的旁注。感谢 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> 标记或其子元素中的任何位置。例如：

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

在 bootstrap 4 中，当您将表单放入下拉菜单中时，在其中单击时它不会折叠。

所以这对我来说效果最好：

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

【讨论】：

不知道如何，但这确实有效，应该是最佳答案。

非常感谢您实际上提供了一个不使用 jQuery 的答案！像魅力一样工作。

这对我来说很容易做到。谢谢。

这应该是公认的答案。

【参考方案4】：

简而言之，你可以试试这个。它对我有用。

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

【参考方案5】：

当您将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 试试这个。

【参考方案6】：

我在使用 Bootstrap 3 中嵌套在下拉菜单中的手风琴/切换子菜单时遇到了同样的问题。从 source code 借用此语法来阻止所有折叠切换关闭下拉菜单：

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

您可以将[data-toggle="collapse"] 替换为您想要停止关闭表单的任何内容，类似于@DonamiteIsTnt 添加属性的方式。

【参考方案7】：

我写了几行代码，让它在我们需要更多控制的情况下完美运行：

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