Меню из Bootstrap Offcanvas. Как скрывать при клике на пункт меню?

Question

[Денис]

Как сделать чтобы Offcanvas когда оно выезжает слева с пунктами меню, чтобы по клику на пункт меню, панель исчезала. Сейчас она пропадает только если тыкнуть на крестик или по любой области вне Offcanvas. Спасибо!

Comments

[Антон Литвиненко]

написать кусочек кода который будет при клике на пункт меню делать то же самое что при клике на крестик

[Денис]

Антон Литвиненко, если покажите пример будет просто отлично. Я пытался, но знаний не хватило(

[Антон Литвиненко]

Денис, типа както так
https://stackoverflow.com/questions/40983595/close...
только работать он не будет ибо здесь джейквери, но вам же например надо

Answer 1

[Сергей]

При клике на пункт меню вызывать метод hide.

Как-то так.

import Offcanvas from 'bootstrap/js/dist/offcanvas';

const offcanvasEl = document.getElementById('offcanvas');
const offcanvas = Offcanvas.getOrCreateInstance(offcanvasEl);
const links = offcanvasEl.querySelectorAll('.nav-link');

links.forEach(link => link.addEventListener('click', e => offcanvas.hide()));

Также, как вариант, можно попробовать присвоить ссылкам атрибут data-bs-dismiss="offcanvas".

Comments

[Денис]

Почему то не получается( Заменил классы на свои, вставил в скрипт. Может ошибку делаю. Как правильно этот код вставить?

[Сергей]

Если удовлетворяет поддержка браузерами свойства type="module", то попробуйте так.
Иначе надо воспользоваться сборщиком, например, Webpack.

[Denis Masson]

Сергей, для чего ему сборщик если ему нужно банально пяти строчный, а то и меньше скрипт на js'e написать