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

16

主题

0

回帖

105

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

经过研究,有更精简简单的扩展办法,如下:
  1. const getDropdown = document.querySelectorAll('[data-bs-dropdown="hover"]');
  2. if (getDropdown.length > 0) {
  3.   getDropdown.forEach(function (Item) {
  4.     let ThisEl = new bootstrap.Dropdown(Item);
  5.     Item.addEventListener('mouseenter', function () {
  6.       ThisEl.show();
  7.     })
  8.     Item.parentNode.addEventListener('mouseleave', function () {
  9.       setTimeout(() => {
  10.         ThisEl.hide();
  11.       }, 300);
  12.     })
  13.   })
  14. }
复制代码


要求不高的话,可以使用这个方法
# 点我查看 #

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