下拉菜单中的Bootstrap 4 Toggle复选框 [英] Bootstrap 4 Toggle Checkbox within Dropdown menu

问题描述

我放置了一个样式为Bootstrap Toggle插件( http://www.bootstraptoggle.com/)在Bootstrap 4下拉菜单中( https://getbootstrap.com/docs/4.0/components/dropdowns/).当我单击切换开关时，菜单立即关闭.

I placed a checkbox styled with Bootstrap Toggle Plugin (http://www.bootstraptoggle.com/) in a Bootstrap 4 dropdown menu (https://getbootstrap.com/docs/4.0/components/dropdowns/). When I click the toggle, the menu gets closed immediately.

我可以通过使用菜单项上的 onclick ="event.stopPropagation();" (来自此处的代码:).但是然后，拨动开关不再起作用.

I can prevent this by using onclick="event.stopPropagation();" on the menu item (code from here: Keep Bootstrap dropdown open on click). But then, the toggle switch does not work anymore.

是否可以通过单击切换开关使菜单保持打开状态?

Is there a way to have the menu stay open when the toggle is clicked?

推荐答案

如果将切换开关包装在表单标签中，则不应关闭下拉菜单.

if you wrap your toggle inside a form-tag it should not close the dropdown.

http://jsfiddle.net/mjhr0f6d/2/

...
<form>
<input type="checkbox" checked data-toggle="toggle">wrapped inside form
</form>
...

这篇关于下拉菜单中的Bootstrap 4 Toggle复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！