Question

我有一个单击打开的下拉菜单，当单击字体超赞的fa-bars图标时，fa-bars类被删除，然后添加了字体超赞的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");
});

Answer 1

只需在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' : '';
  });
});

Answer 2

CSS应该是UI /布局功能的首选。简单的.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>

在mouseleave上添加/删除类

2 个答案: