打开菜单时如何替换菜单图标？

Question

打开菜单时如何替换图标？

这是我的页面，这是左边的菜单:

https://www.s1biose.com/boutique/ma-boutique-pro

我在主题的 JS 文件中添加了以下代码，但它不起作用:

  $('#navbar-collapse-first').on('show.bs.collapse', function () {
       $(this).find('.navbar-toggle-first svg').removeClass("fa-bars").addClass("fa-times");
  });

  $('#navbar-collapse-first').on('hide.bs.collapse', function () {
       $(this).find('.navbar-toggle-first svg').removeClass("fa-times").addClass("fa-bars");
  });

这是我的菜单代码：

<a class="navbar-toggle-first-link" data-toggle="collapse" data-target="#navbar-collapse-first">
  <span class="navbar-toggle-first collapsed" data-toggle="collapse" data-target="#navbar-collapse-first">
    <span class="fa-layers fa-3x">
      <i class="far fa-circle"></i>
      <i class="fas fa-bars" data-fa-transform="shrink-6"></i>
    </span>
  </span>
</a>

Answer 1

你可以在点击事件上使用：

$('selector').click(function(){
        $(this).find($(".fa")).removeClass('fa-chevron-down').addClass('fa-chevron-up');  
});

我建议添加一个函数示例：

<span id="mySpan" onclick="myFunction();"></span>
<script> function myFunction(){//here do the change} </script>

complete Example

打开菜单时如何替换菜单图标？

How to replace the icon of my menu when it is open?

collapse

twitter-bootstrap

font-awesome