[英]Cannot resolve the hiding of the top menu in bootstrap dropdown menu
I use a plugin as html editor in a bootstrap application and it has the following structure for it's dropdown menus: 我在引导程序应用程序中将插件用作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>
After selecting one of the fonts in the dropdown menu the top "Fonts" button disappears. 在下拉菜单中选择一种字体后,顶部的“字体”按钮消失。 The reason is that the event bubbles up to the btn-group and set it style element to "display: none".
原因是事件冒泡到btn-group并将其样式元素设置为“ display:none”。
I have tried to prevent the bubbling up so that only the dropdown menu disappears but the Fonts dropdown can be used again. 我试图防止冒泡,以便仅下拉菜单消失,但字体下拉菜单可以再次使用。
I have tried different options, ie: 我尝试了不同的选择,即:
$("dropdown-menu li a").click(function(event){
event.stopPropagation();
});
and 和
$(".dropdown-menu li a").click(function(event){
event.stopPropagation();
});
and a few others but no success. 还有一些,但没有成功。
Any suggestions please? 有什么建议吗?
PS I have read all I could find on this subject (including the many examples on here) and spend many hours trying to get it resolved. 附言:我已阅读了有关该主题的所有文章(包括此处的许多示例),并花了很多时间试图解决该问题。 Furthermore, I tried my best to formulate it as clear as possible, therefore it is a proper stated and researched question.
此外,我尽力将其表述得尽可能清晰,因此这是一个适当陈述和研究的问题。
Since the HTML is being generated dynamically, you could use event delegation . 由于HTML是动态生成的,因此可以使用事件委托 。 The following code you are using
您正在使用以下代码
$(".dropdown-menu li a").click(function(event){
event.stopPropagation();
});
binds a click event to elements matching the selector .dropdown-menu li a
when that code is ran . 当代码运行时,将click事件绑定到与选择器
.dropdown-menu li a
匹配的元素。 Since the elements are created dynamically (after this code is run), the event handlers aren't getting attached. 由于元素是动态创建的(在运行此代码之后),因此事件处理程序不会被附加。 By using event delegation, you could write
通过使用事件委托,您可以编写
$(document).on("click", ".dropdown-menu li a", function(event){
event.stopPropagation();
});
which will bind the event handler to the document element, which does exist at the time the code runs . 它将事件处理程序绑定到document元素, 该元素在代码运行时确实存在 。 And this handler will only be fired if an element matching the selector
.dropdown-menu li a
is clicked. 并且仅当单击与选择器
.dropdown-menu li a
匹配的元素时,才会触发此处理程序。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.