本帖最后由 逆风天 于 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('[data-bs-dropdown="hover"]');
- // 循环遍历
- getDropdown.forEach(function (ThisDropdown) {
- // 鼠标移入[data-bs-dropdown="hover"]时触发的 `mouseenter` 事件
- ThisDropdown.addEventListener('mouseenter', function () {
- ThisDropdown.classList.add('show');
- ThisDropdown.parentNode.querySelector('.dropdown-menu').classList.add('show');
- })
- // 鼠标移出[data-bs-dropdown="hover"]的父元素(.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的最底部，形成一个包裹，才能生效。
更简单的写法
# 点我查看 #
