Добавить / удалить класс при отпускании мыши

Question

У меня есть раскрывающееся меню, открывающееся при щелчке, и когда щелкает по значку fa-bars с потрясающими шрифтами, класс fa-bars удаляется, а затем добавляется класс fa-times с потрясающими шрифтами.

У меня также есть функция mouseleave, которая закрывает выпадающий контейнер при выходе из мыши. Мой вопрос заключается в том, чтобы узнать, смогу ли я изменить класс значков с fa-times на fa-bars при отпускании мыши.

Это код, который меняет значок при клике

 <a href="" class="btn megaNavBtn1" role="button"><i id="toggleMega" class="fa fa-bars megaNavIcon"></i></a>    

  $('#toggleMega').click(function(){
  var ele = $('.megaNavIcon');
   if(ele.hasClass('fa-bars')){
  ele.removeClass('fa-bars')
     .addClass('fa-times')
   }
   else{
  ele.addClass('fa-bars')
     .removeClass('fa-times')
   }
  });

Это код, закрывающий контейнер при отпускании мыши

$('.megaNav').on('mouseleave', function() {
  $(".megaNav").collapse("hide");
});

Answer 1

CSS должен быть вашим первым выбором для интерфейса / функциональности макета. Простое правило .myclass:hover{} - это супер простой способ выделить элементы в событиях mouseenter mouseleave.

li:hover {
  font-weight: bold;
  cursor: pointer;
}

<ul>
<li>Foo</li>
<li>Bar</li>
<li>Boo</li>
<li>Yah</li>
<ul>

Answer 2

Просто добавьте методы removeClass() и addClass() в вашу функцию mouseleave следующим образом:

$('.megaNav').on('mouseleave', function() {
  $(".megaNav").collapse("hide");
  $('#toggleMega').removeClass('fa-times');
  $('#toggleMega').addClass('fa-bars');
});

Или вы можете еще больше упростить это, используя метод toggleClass () , например:

$('.megaNav').on('mouseleave', function() {
  $(".megaNav").collapse("hide");

  $('#toggleMega').toggleClass(function(){
    return $(this).hasClass('fa-times') ? 'fa-bars' : '';
  });
});