Javascript Bulma下拉菜单不工作

Bulma下拉列表似乎无法切换单击。以下是文档中的代码片段：

下拉按钮

您需要使用JavaScript切换类

处于活动状态。当
.dropdown
的
处于活动状态时
会将
的
显示
。下拉菜单
从
无
更改为
块

下面是实现它的基本方法


var dropdown=document.querySelector（'.dropdown'）；
dropdown.addEventListener（'click'，函数（事件）{
event.stopPropagation（）；
下拉列表.classList.toggle（'is-active'）；
});

下拉按钮

这里有一个完整的解决方案，我使用vanilla JS很好地解决了这个问题，并确保在单击下拉列表或按Esc键时关闭下拉列表


//获取页面上所有不可悬停的下拉列表。
const dropdowns=document.querySelectorAll（'.dropdown:not（.is hoverable'）；
如果（dropdowns.length>0）{
//对于每个下拉列表，添加事件处理程序以在单击时打开。
下拉菜单.forEach（函数（el）{
el.addEventListener（'click'，函数（e）{
e、 停止传播（）；
el.classList.toggle（'is-active'）；
});
});
//如果用户单击外部下拉列表，请将其关闭。
document.addEventListener（'click'，函数（e）{
关闭下拉列表（）；
});
}
/*
*通过删除'is active'类关闭下拉列表。
*/
函数关闭下拉列表（）{
下拉菜单.forEach（函数（el）{
el.classList.remove（'is-active'）；
});
}
//如果按下ESC，则关闭下拉列表
document.addEventListener（'keydown'，函数（事件）{
设e=event | | window.event；
如果（e.key=='Esc'| | e.key==='Escape'）{
关闭下拉列表（）；
}
});

行动
js在哪里？但是fiddle中的标记看起来与文档中的标记大不相同。缺少像
下拉列表
类和
下拉列表触发器
类。酷。现在明白了。很高兴它起了作用！还有一件事我想问。图标在bulma中工作吗？我试过使用一些图标，但不起作用。@AakashThakur你是说一般的图标吗？或者你指的是一个特定的集合，比如fontAwesome。哦，我没有包括fontAwesome。现在开始工作了。谢谢。太好了，谢谢！你为什么不将Keydown事件放入
if dropdowns.length>0
条件中？@dtrckd-hmm我不记得了。我想你可以把它搬走。回答得好，帮了我大忙！