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

Question

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

你有什么建议吗？

谢谢大家

Answer 1

在 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');