JQuery Add/Remove Class Issue

Question

Создание простого меню Multilevel push на основе классов CSS. Он не имеет анимации javascript и работает при преобразовании/переходе CSS. Он отлично работает на каждой части, кроме переключения открытых классов.

1. Когда пользователь нажимает на ссылку, он должен сначала удалить класс .is-open. Затем добавьте его, чтобы анимация активировалась.

2. Если я говорю об изменении класса .is-open на втором этапе до .addClass("foo");, у него нет проблем с удалением класса .is-open и добавлением класса .foo. Поэтому мне интересно, в чем проблема с этим разделом кода.

Вы можете найти код здесь http://jsbin.com/EjUQ/2/

На демке вы увидите, что меню без submenu нагрузки ничего. Это правильное поведение. Проблема, с которой я сталкиваюсь, заключается в том, что мне нужно закрыть меню, прежде чем открывать новый. Поэтому удаляем класс .is-open, а затем снова применяем его.

например

Link 1, 4,7 не имеют ничего так SubMenu с открытым на click/touch, нажав на кнопку меню не предложит ничего случиться. Это правильное поведение.

Ссылка 2,3,5,6 имеет подменю, поэтому он открывается по щелчку/касанию, а кнопка меню переключает меню на открытие/закрытие.

Надеюсь, кто-то может указать мне направление того, что я делаю неправильно. Благодарю.

Answer 1

Вы должны использовать событие transitionend. Чтобы вы прослушали анимацию, перед добавлением класса «is-open» обратно на боковую панель и содержимое. Пример:

sidebar.one('transitionend', function() { 
    sidebar.addClass("is-open"); 
    content.addClass("is-open"); 
}); 

Теперь, что я здесь не является совершенным, но я считаю, что это передает понятие: http://jsbin.com/EjUQ/9