Bootstrap 5：offcanvas，如何在鼠标离开时关闭它？

问题描述

我想使用 offcanvas 创建一个带有导航栏的网站。效果很好，但我想在鼠标离开功能上实现关闭导航栏。

您对此有什么建议吗？

谢谢各位

解决方法

在 BS5 中这很容易，尤其是如果您使用 vanilla JS：

function offCanvasListener(offCanvasId) {
  let myOffCanvas = document.getElementById(offCanvasId);

  const hideCanvas = () => {
    let openedCanvas = bootstrap.Offcanvas.getInstance(myOffCanvas);
    openedCanvas.hide();
    event.target.removeEventListener('mouseleave',hideCanvas);
  }
  const listenToMouseLeave = (event) => {
    event.target.addEventListener('mouseleave',hideCanvas);
  }
  
  myOffCanvas.addEventListener('shown.bs.offcanvas',listenToMouseLeave);
}


//function call
offCanvasListener('offcanvasExample');