Меню из 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 написать

Answer 2

[Александр Токмаков]

Сделайте data-bs-dismiss="offcanvas" на li, а не на ссылки. У меня получилось)

<ul class="list-unstyled">
            <li data-bs-dismiss="offcanvas"><a  href="#feedback" class="text-dark">ОТЗЫВЫ</a></li>
            <li  data-bs-dismiss="offcanvas"><a  href="#timetable" class="text-dark">РАСПИСАНИЕ</a></li>
            <li  data-bs-dismiss="offcanvas"><a href="#services" class="text-dark">УСЛУГИ</a></li>
            <li  data-bs-dismiss="offcanvas"><a href="#discounts" class="text-dark">АКЦИИ</a></li>
            <li  data-bs-dismiss="offcanvas"><a href="#faq" class="text-dark">ВОПРОС - ОТВЕТ</a></li>
        </ul>