lavezzi1
@lavezzi1

Как закрывать меню по клику на ссылку внутри него в SPA?

Здравствуйте. Есть SPA на vue.js возник такой вопрос. Есть обычный сайдбар который выкатывается справа по клику на гамбургер на мобильных. Нужен такой behavior – человек кликает на гамбургер меню отктрывается (легко) после того, как он кликает на ссылку, происходит переход на страницу и в этот же момент нужно убирать класс с боди чтобы меню закрылась ( в этом месте как раз проблема). Если сделать по обычному, то есть просто ловить клик внутри сайдбара по ссылку и снимать класс то меню закрывается без transition – просто схлопывается и это наверное из за того, что подгружается контент страницы во время клика на ссылку (не уверен). Так как все таки правильно сделать это?

JQuery подобный код (но не jquery). Сделал так – работает. Но не уверен что это по православному.

$('.sidebar__item').on('click', function() {
            setTimeout(function() {
                if ($('body').hasClass('sidebar--open')) {
                    $('body').removeClass('sidebar--open');
                }
            }, 100);
        })


UPDATE
В общем я нашел логичную закономерность. Нет анимация только в том случае, когда меняется layout, то есть вся страница например с /page1 на /page2 не будет анимации. Анимация есть при переходе например /page1/subpage1 или /page2/subpage2.

Есть решение для этого? Опасно ли юзать setTimeout?
  • Вопрос задан
  • 721 просмотр
Пригласить эксперта
Ответы на вопрос 4
@Vovchikvoin
Во первых дело точно не в асинхронности, тайм-аут не причем. А во вторых у вас там какие то крутые css правила на этот класс, можно их тоже в вопрос добавить, потому как ошибка явно где то там, когда вы удаляете класс все правила от него уже не работают, следовательно у вас что-то должно плавно закрывать ваше меню, но я не понимаю что. Добавьте весь css принадлежащий к коду.
Ответ написан
SkryabinD
@SkryabinD
Программирование, управление проектами.
Не знаю конкретно про vue.js, но вероятно у роутинга есть событие типа onRouteChange, тогда сброс класса можно поставить туда.
Ответ написан
Комментировать
if ($('body').hasClass('sidebar--open')) {
       $('body').removeClass('sidebar--open');
 }

явно можно сократить до
$('body.sidebar--open').removeClass('sidebar--open');
Ответ написан
Комментировать
@napa3um
Если вы используете vue.js, то управляйте DOM-ом с помощью биндингов, а не с помощью jQuery. Открытость меню должна зависеть от переменной модели вида, которая (модель) должна быть подписана на событие изменение роута, при котором модель сбрасывала бы переменную "открытости" меню.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы