Как сделать закрытие блока навигации по клику ссылки?

Question

[Oposum]

В принципе вопрос "дурацкий", но с вечера и до утра, не дает покоя.
Когда кликаю на ссылку в выпадающем меню, меню должно закрываться и отрабатывать те эффекты, которые есть при клике на само меню. То есть, есть "хитрое" слово MENU, которое трансформируется в EXIT. Но не могу задать эту трансформацию, для ссылки.
Буду очень благодарен, если посмотрите: https://codepen.io/ukropossum/pen/GRpLwjE
Имею ввиду, что при вызове меню и клике "Click me", должно закрываться, с той же трансформацией, что и при клике "EXIT"

Answer 1

[qwermus]

$('.toggle-nav')
замени на
$('.toggle-nav, a.button')

Comments

[Oposum]

это тоже делал.
не могу понять, что делать с функцией changeLetters()?

(function($) {

  $(document).ready(function(){
    $('.toggle-nav, a.button').on('click', function() {
      toggleNavigation($(this), $('.nav-pane'));
      changeLetters($(this));
    });

    function toggleNavigation(btn, nav) {
      btn.toggleClass('open');
      nav.toggleClass('open');
    }

    function changeLetters(btn){
      var m = $('.toggle-nav span.m');
      var e = $('.toggle-nav span.e');
      var n = $('.toggle-nav span.n');
      var u = $('.toggle-nav span.u');

      e.toggleClass('btn-close');

      if(btn.hasClass('open'))
      {
        m.text("E");
        n.text("I");
        u.text("T");
      }
      else
      {
        m.text("M");
        n.text("N");
        u.text("U");
      }
    }
  });

})(jQuery);

[qwermus]

1) получает блоки, в которых расположены 4 буквы
2) Меняет класс btn-close
3) В зависимости от состояния кнопки меняет буквы MNU на EIT

[Oposum]

qwermus, ок, так где ошибка?
почему буквы меняются "как попало"?

[qwermus]

Oposum, что значит как попало? У меня всё верно меняется, выглядит красиво, а после добавления $('.toggle-nav, a.button') и закрывается по ссылке

[Oposum]

qwermus, "как попало" это значит, следующее - при клике на MENU, трансформируется в EXIT, если нажимать на EXIT то меняется на MENU, то есть как и положено. НО! Попробуй кликнуть на ссылку a.button и посмотри на трансформацию MENU-EXIT. Сейчас обновил код, для демонстрации, просто обрати внимание на MENU-EXIT при клике на ссылку.

[qwermus]

Надо заменить вызов функций на

toggleNavigation($('.toggle-nav'), $('.nav-pane'));
      changeLetters($('.toggle-nav'));

Потому что при клике на меню this - это меню, а при клике на кнопку this - это кнопка, и последующий код отрабатывает уже иначе. Если явно указать, с каким элементов работаем - всё становится на свои места

Answer 2

[Alex]

a(class='button toggle-nav' href='#') Click me

Comments

[Oposum]

Спасибо за ответ, но я так делал - ломается анимация трансформации MENU to EXIT