,可以通过以下步骤实现:
data-toggle="dropdown"
属性。data-esc-close
属性,并将其设置为true
。例如:data-esc-close="true"
。document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
var dropdowns = document.querySelectorAll('[data-esc-close="true"]');
dropdowns.forEach(function(dropdown) {
var menu = dropdown.nextElementSibling;
if (menu.classList.contains('show')) {
dropdown.click();
}
});
}
});
以上代码会在ESC键按下时,遍历所有具有data-esc-close="true"
属性的触发元素,检查其相邻的下拉菜单是否处于打开状态,如果是,则模拟点击触发元素以关闭下拉菜单。
这种方法可以确保在按下ESC键时关闭Bootstrap 4下拉菜单,提供更好的用户体验。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)
Bootstrap4 按钮组
Bootstrap 4 中允许我们将按钮放在同一行上。
可以在
领取专属 10元无门槛券
手把手带您无忧上云