无法解决引导程序下拉菜单中顶部菜单的隐藏问题

Cannot resolve the hiding of the top menu in bootstrap dropdown menu

本文关键字：菜单 隐藏 问题 顶部 解决 引导程序 下拉菜单      更新时间：2023-09-26

我在引导应用程序中使用一个插件作为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组，并将其样式元素设置为"display:none"。

我试图防止冒泡，这样只有下拉菜单消失，但字体下拉菜单可以再次使用。

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

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

和

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

还有其他一些，但没有成功。

有什么建议吗？

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

由于HTML是动态生成的，因此可以使用事件委派。以下代码您正在使用

$(".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匹配的元素时，才会触发此处理程序。

相关文章：