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

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

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

Что не так?

$(".fas.fa-bars").click(function(event) {
  $(this).toggleClass('open');
  $('.fas.fa-times').toggleClass('open');
  $('.header h2').toggleClass('close');
});
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mobmenu">
  <a href="#mmenu"><i class="fas fa-bars"></i>Bars</a>
  <a href="#mmenu"><i class="fas fa-times"></i>Times</a>
  <a href="#">
    <h2>сияние</h2>
  </a>
</div>

введите сюда описание изображения введите сюда описание изображения введите сюда описание изображения введите сюда описание изображения


Ответы (0 шт):