引导模式在下拉菜单中不起作用

Posted 2023-02-22

【中文标题】引导模式在下拉菜单中不起作用

【英文标题】：bootstrap modal not working in dropdown menu

【发布时间】：2014-12-29 03:24:08

【问题描述】：

Bootstrap 3.3 在下拉菜单中无法使用情绪链接。

JSFiddle

<ul class="dropdown-menu" role="menu">
  <li><a href="#" data-toggle="modal" data-target="#new-list">Add New Link</a>

如果我从 js 模态中删除此行效果很好，但单击后下拉菜单会折叠。必须打开下拉菜单。

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

【参考方案1】：

这是在下拉菜单中显示模态应该做的：

$('.dropdown-menu').click(function(e) 
    e.stopPropagation();
    if ($(e.target).is('[data-toggle=modal]')) 
        $($(e.target).data('target')).modal()
    
);

演示：http://jsfiddle.net/wkc5md23/8/

【讨论】：

感谢 dfsq。这节省了我的时间。

像一个魅力一样工作，别忘了等待文档加载，否则 jQuery 将找不到下拉菜单的(function($) $(window).on("load",function() $('.dropdown-menu').click(function(e) e.stopPropagation(); if ($(e.target).is('[data-toggle=modal]')) $($(e.target).data('target')).modal() ); ); )(jQuery);

【参考方案2】：

删除 jQuery 函数 $('.dropdown-menu').click 并确保下拉菜单如下所示：

html

<ul class="list">
    <li class="item">
        <a href="">I am a item</a>

        <ul class="dropdown-menu" role="menu">
            <li>
                <a href="#" data-toggle="modal" data-target="#new-list">Add New Link</a>
            </li>
        </ul>
    </li>
</ul>

CSS

.list li ul 
    display: none;

解决方案 1. 纯 CSS，悬停时显示下拉菜单：

.list li:hover ul 
    display: block

解决方案 2. 只用 jQuery，点击显示下拉菜单：

使用 CSS 类显示下拉菜单：

.open  display: block 

然后用 jQuery 来做这个：

$('.list li a').click(function()
    $(this).next().toggleClass('open');
);

【参考方案3】：

我尝试在 DropdownMenu 中添加一个 Button 元素而不是 DropdownItem，它对我有用。我使用了 reactstrap（因此元素以大写字母开头），但它可能具有与 bootstrap 或 react-bootstrap 类似的行为。这并没有关闭下拉菜单。