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

【问题标题】：bootstrap modal not working in dropdown menu引导模式在下拉菜单中不起作用
【发布时间】：2014-12-29 03:24:08
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery twitter-bootstrap drop-down-menu modal-dialog

【解决方案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 类似的行为。这并没有关闭下拉菜单。

【讨论】：