Почему не работают кнопнки открытия-закрытия меню?

Question

[Norum]

Прописал две иконки открытия-закрытия fas fa-bars и fas fa-times.

В jquery прописал действия при нажатии на эти иконки, но в итоге кнопка открытия пропадает при нажатии, а крестик при нажатии на него не уходит.

Что не так?
https://jsfiddle.net/Norum87/h4qfdwcu/5/

Comments

[Ankhena]

1. В песочнице не подключена JQ
2. В песочнице текст написан белым по белому. Вы, извините, для кого ее делали?
3. Вы обрабатываете клик по иконке. Но у вас там ссылки. Кстати, это должны быть не ссылки, а кнопки. И клик должен быть по ним. Станет проще.

[Norum]

Ankhena,
1) JQ подключил
2)Я скинул именно нужную часть кода, чтобы мне написали где ошибка в JQ
3) у меня там ссылки, так как я использую плагин mmenu

[Ankhena]

Norum, я написала почему выше.

[Norum]

Ankhena, так вы объясните развернуто

[Ankhena]

Norum, белыми на белом они остались.. очень удобно.

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

Вы вешаете клик на иконку.
И говорите, что при клике нужно:
- Сменить класс у того на что кликнули. При добавлении класса open к бургеру добавляется display:none => бургер исчезает.
- Сменить класс у крестика. Сменили, крестик стал инлайн-блоком => его видно.
- Сменить класс у заголовка в хедере. Такого заголовка в коде нет => ничего не происходит.

Клик по крестику ничем не обрабатывается. Остаются только переходы по ссылкам.

[Norum]

Ankhena, а если засунуть их в один div?

<div class="mobnav">
	<a href="#mmenu"><i class="fas fa-bars"></i></a>
	<a href="#mmenu"><i class="fas fa-times"></i></a>
</div>

задать стили

.mobnav i {
  color: #fff;
  
}

.fas.fa-bars {
  font-size: 24px;
  color: #ffffff;
  cursor: pointer;
  padding: 15px;
}

.open .fas.fa-bars {
  display: none !important;
}

.fas.fa-times {
  display: none;
  font-size: 26px;
  color: #ffffff;
  cursor: pointer;
  padding: 15px;
}

.open .fas.fa-times {
  display: inline-block !important;
}

и повесить обработчик

$(".mobnav").click(function(event) {
    $(this).toggleClass('open');
  });

Но в итоге работает только на бургер. Как правильно прописать обработчик, чтобы и на крестик работало? Может проблема в том, что я использую плагин mmenu ?

[Ankhena]

Norum, Я не знаю что за плагин mmenu. И судя по симптомам и не хочу знать.

Я так понимаю, что вы хотите, чтобы при клике на крестик, убирался крестик и возвращался бургер.

В любом случае:
!important лишний.

Самый дурацкий вариант с вашим кодом:
Так и допишите обработчик клика на крестик.

Вариант получше:
Обрабатываете клик по ссылке (лучше, конечно, всё таки кнопки). Одновременно делая 2 функции: ваш плагин и работа с бургеро-крестиком.

Идеальный алгоритм:
Одна кнопка (button).
При клике на нее меняется/добавляется класс, который меняет вид кнопки крестик-бургер.
И одновременно меняет/добавляет класс, который отвечает за открытие/закрытие меню.
Можно даже обойтись одним классом, который вешается на общую обертку кнопки и меню (это может быть header или body).

Нормальный алгоритм:
Если по дизайну никак не получается сделать бургер и крестик одной кнопкой, то пишутся 2 обработчика клика. Один на бургер на открытие меню и второй на крестик на закрытие.

JQ или JS
Если в проекте много где нужен JQ и от него всё равно так просто не избавиться, то пусть остается.
Если вы его притащили только ради меню и карусельки, то пишите на JS.