在Bulma下拉菜单中,有时候会遇到下拉菜单不关闭的问题。这个问题一般是由于事件冒泡引起的。下面是一个解决该问题的示例代码:
HTML代码:
JavaScript代码:
document.addEventListener('DOMContentLoaded', function () {
// 获取下拉菜单和触发器元素
var dropdown = document.getElementById('dropdown');
var dropdownTrigger = document.querySelector('.dropdown-trigger button');
// 点击菜单外的地方时关闭菜单
document.addEventListener('click', function (event) {
var target = event.target;
if (!dropdown.contains(target)) {
dropdownTrigger.classList.remove('is-active');
}
});
// 点击触发器时切换菜单状态
dropdownTrigger.addEventListener('click', function () {
dropdownTrigger.classList.toggle('is-active');
});
});
上述代码中,我们通过JavaScript来监听点击事件。当点击菜单外的地方时,菜单会关闭。当点击触发器时,菜单的状态会切换。
希望以上解决方法对你有帮助!
上一篇:Bulma图片未占满整个宽度
下一篇:Bulma响应式类未应用