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