Question

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

Answer 1

这是您在下拉列表中进行模态显示时应该做的事情：演示：http://jsfiddle.net/wkc5md23/8/

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

Answer 3

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

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

3 个答案: