时间戳

首页 > 解决方案 > 在 mouseleave 上添加/删除类

javascript - 在 mouseleave 上添加/删除类

问题描述

我在单击时打开了一个下拉菜单，当单击 font-awesome fa-bars 图标时，删除了 fa-bars 类，然后添加了 font-awesome fa-times 类。

我还有一个 mouseleave 函数，可以在鼠标退出时关闭下拉容器。我的问题是看看我是否可以在 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')
   }
  });

这是在 mouseleave 上关闭容器的代码

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

标签： javascriptjqueryhtmlcssfont-awesome

解决方案

只需在函数中添加removeClass()andaddClass()方法，如下所示：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' : '';
  });
});

推荐阅读