Блог

Главная - Вопросы по программированию - Загрузчик 5 : offcanvas, как закрыть его при отпуске мыши?

Загрузчик 5 : offcanvas, как закрыть его при отпуске мыши?

#bootstrap-5 #off-canvas-menu

Вопрос:

я хочу создать веб-сайт с навигационной панелью, используя offcanvas. Это отлично работает, но я хочу реализовать функцию закрытия навигационной панели при оставлении мыши.

У вас есть какие-нибудь предложения, как это сделать?

Спасибо вам, ребята

Комментарии:

1. Пожалуйста, опубликуйте соответствующий код

Ответ №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');

Комментарии:

1. большое вам спасибо , это именно то, что мне нужно

2. @Lanfeust2100 Я отредактировал свой ответ. Я случайно удалил неправильный прослушиватель событий в hideCanvas. Теперь это исправлено. Функциональность та же самая. Теперь он добавляет и удаляет событие mouseleave из offCanvas. В предыдущем коде он добавил mouseleave и удалил события showed.bs.offcanvas. Это работало правильно, но было неправильно. Теперь все в порядке. Я был рад помочь.

Метки: ,