Question

点击fa-bars后，我想将fa-times更改为menu-button。

如何使用我当前的代码执行此操作？

$(document).ready(function(){

    $('nav.primary').prepend('<div id="menu-button">Menu <i class="fa fa-bars"></i></div>');
      $('nav.primary #menu-button').on('click', function(){
          var menuItems = $(".menu-header-container");
          menuItems.toggle();
    });

});

Answer 1

使用.toggleClass()

根据类的存在或state参数的值，从匹配元素集中的每个元素添加或删除一个或多个类。

$('nav.primary #menu-button').on('click', function(){
      $(this).find('i').toggleClass('fa-bars fa-times')
});

Answer 2

使用$.toggleClass('fa-bars fa-time')（或$.addClass('fa-bars').removeClass('fa-times');

我还建议将事件绑定更改为

$(document).on('click', '#menu-button', function(){

Answer 3

您可以将toggle与您想要更改的两个类一起使用：

$('#menu-button i').toggleClass('fa-bars fa-times');

Answer 4

试试这个：

$('nav.primary #menu-button').on('click', function(){
  var el = $(this).find('.fa-bars');
  el.removeClass('fa-bars').addClass('fa-times');
});

使用jQuery切换更改

4 个答案: