查看 54
回复 0
Bootstrap 5 Dropdown组件扩展hover事件
逆风天

16

主题

0

回帖

105

积分
发表于 2024-1-29 14:17:11
显示全部楼层 阅读模式
本帖最后由 逆风天 于 2024-1-30 16:01 编辑
Bootstrap 5 Dropdown组件扩展hover事件

实现目标:
       我们想在鼠标指向dropdown下拉菜单的时候,弹出下拉菜单,而不是点击弹出。

1.首先,我们给dropdown内部 a 标签的dropdown-toggle添加一个新的属性data-bs-dropdown="hover",看起来像这样:
  1. <div class="<font color="#00ff00">dropdown</font>">
  2.    <<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>
  3.    <ul class="dropdown-menu">
  4.    </ul>
  5. </div>
复制代码

2.然后,我们给新的属性data-bs-dropdown="hover"增加监听事件,看起来像这样:
  1. // 选择所有具有 `data-bs-dropdown="hover"` 属性的dropdown菜单元素
  2. const getDropdown = document.querySelectorAll('[data-bs-dropdown="hover"]');
  3. // 循环遍历
  4. getDropdown.forEach(function (ThisDropdown) {
  5.      // 鼠标移入[data-bs-dropdown="hover"]时触发的 `mouseenter` 事件
  6.        ThisDropdown.addEventListener('mouseenter', function () {
  7.               ThisDropdown.classList.add('show');
  8.               ThisDropdown.parentNode.querySelector('.dropdown-menu').classList.add('show');
  9.        })
  10.        // 鼠标移出[data-bs-dropdown="hover"]的父元素(.dropdown)时触发的 `mouseleave` 事件
  11.        // 这里使用父元素可以避免下拉菜单立即消失
  12.        ThisDropdown.parentNode.addEventListener('mouseleave', function () {
  13.               ThisDropdown.classList.remove('show');
  14.               ThisDropdown.parentNode.querySelector('.dropdown-menu').classList.remove('show');
  15.        })
  16. })
复制代码
3.注意事项,这个需要初始化使用,也就是说,在head标签里引入了bootstrap的js,下拉菜单在body,这个代码就需要放到html的最底部,形成一个包裹,才能生效。


更简单的写法
# 点我查看 #


您需要登录后才可以回帖 登录 立即注册
QQ 快速回复 返回列表