Question

我在一个bootstrap应用程序中使用一个插件作为html编辑器，它的下拉菜单有以下结构：

<div class="btn-group" title="Fonts" style="cursor: pointer;">
    <a class="btn dropdown-toggle btn-sm btn-success" data-toggle="dropdown" href="javascript:void(0)" title="Fonts">Font<span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="javascript:void(0)">Sans serif</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Serif</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Wide</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Narrow</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Comic Sans MS</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Courier New</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Garamond</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Georgia</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Tahoma</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Trebuchet MS</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Verdana</a></li>
    </ul>
</div>

在下拉菜单中选择其中一种字体后，顶部的“字体”按钮消失。原因是事件冒泡到btn-group并将其样式元素设置为“display：none”。

我试图阻止冒泡，以便只有下拉菜单消失，但可以再次使用字体下拉列表。

我尝试了不同的选择，即：

$("dropdown-menu li a").click(function(event){
    event.stopPropagation();
});

和

$(".dropdown-menu li a").click(function(event){
    event.stopPropagation();
});

和其他一些但没有成功。

有什么建议吗？

P.S。我已经阅读了有关此主题的所有内容（包括此处的许多示例），并花了很多时间试图解决它。此外，我尽力将其表述得尽可能清楚，因此这是一个适当陈述和研究的问题。

Answer 1

由于HTML是动态生成的，因此您可以使用event delegation。您正在使用以下代码

$(".dropdown-menu li a").click(function(event){
    event.stopPropagation();
});

在运行该代码时，将click事件绑定到与选择器.dropdown-menu li a 匹配的元素。由于元素是动态创建的（在运行此代码之后），因此事件处理程序不会被附加。通过使用事件委派，您可以编写

$(document).on("click", ".dropdown-menu li a", function(event){ event.stopPropagation(); });

将事件处理程序绑定到文档元素，它在代码运行时确实存在。只有在单击与选择器.dropdown-menu li a匹配的元素时才会触发此处理程序。

无法解决bootstrap下拉菜单中顶层菜单的隐藏问题

1 个答案: