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

Question

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

你有什么建议吗？

谢谢你们

标签： bootstrap-5off-canvas-menu

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