Bootstrap 5 Dropdown组件扩展hover事件
本帖最后由 逆风天 于 2024-1-30 16:01 编辑Bootstrap 5 Dropdown组件扩展hover事件
实现目标：
我们想在鼠标指向dropdown下拉菜单的时候，弹出下拉菜单，而不是点击弹出。
1.首先，我们给dropdown内部 a 标签的dropdown-toggle添加一个新的属性data-bs-dropdown="hover"，看起来像这样：
<div class="<font color="#00ff00">dropdown</font>">
<<font color="#9932cc">a</font> href="#" class="<font color="#ff00ff">dropdown-toggle</font>" data-bs-toggle="dropdown" <font color="#ff0000">data-bs-dropdown="hover"</font>>链接</a>
<ul class="dropdown-menu">
</ul>
</div>
2.然后，我们给新的属性data-bs-dropdown="hover"增加监听事件，看起来像这样：
// 选择所有具有 `data-bs-dropdown="hover"` 属性的dropdown菜单元素
const getDropdown = document.querySelectorAll('');
// 循环遍历
getDropdown.forEach(function (ThisDropdown) {
// 鼠标移入时触发的 `mouseenter` 事件
ThisDropdown.addEventListener('mouseenter', function () {
ThisDropdown.classList.add('show');
ThisDropdown.parentNode.querySelector('.dropdown-menu').classList.add('show');
})
// 鼠标移出的父元素(.dropdown)时触发的 `mouseleave` 事件
// 这里使用父元素可以避免下拉菜单立即消失
ThisDropdown.parentNode.addEventListener('mouseleave', function () {
ThisDropdown.classList.remove('show');
ThisDropdown.parentNode.querySelector('.dropdown-menu').classList.remove('show');
})
})3.注意事项，这个需要初始化使用，也就是说，在head标签里引入了bootstrap的js，下拉菜单在body，这个代码就需要放到html的最底部，形成一个包裹，才能生效。
更简单的写法
# 点我查看 #
页:
[1]