如何用JS更改折叠菜单图标？

Question

我有一个使用 Bootstrap 3.3.7 和 Font Awesome 5.0.1

的主菜单（折叠）

我在找什么：

菜单关闭时，会显示一个"plus"图标。
打开菜单时，会显示一个 "minus" 图标。

"plus" 图标显示在菜单上但没有改变。

我认为我的 JS 代码有问题。

<nav role="navigation" aria-labelledby="block-navigationprincipale-menu" id="block-navigationprincipale">
   <ul class="menu nav navbar-nav">
      <li class="expanded dropdown open">
         <a href="/boutique" class="dropdown-toggle collapse-change-icon" data-toggle="dropdown"><i class="fas fa-plus-circle fa-lg"></i> Boutiques</a>
            <ul class="menu dropdown-menu">
               <li>
                  <a href="/boutique" data-drupal-link-system-path="boutique"><i class="fas fa-shopping-bag fa-lg"></i> Boutiques</a>
               </li>
               <li>
                  <a href="/produit" data-drupal-link-system-path="produit"><i class="fas fa-gift fa-lg"></i> Produits</a>
               </li>
               <li>
                  <a href="/service" data-drupal-link-system-path="service"><i class="fas fa-sign-language fa-lg"></i> Services</a>
               </li>
            </ul>
      </li>
      <li class="expanded dropdown">
         <a href="/groupe" class="dropdown-toggle collapse-change-icon" data-toggle="dropdown"><i class="fas fa-plus-circle fa-lg"></i> Groupes</a>
            <ul class="menu dropdown-menu">
               <li>
                  <a href="/groupe" data-drupal-link-system-path="groupe"><i class="fas fa-users fa-lg"></i> Groupes</a>
               </li>
               <li>
                  <a href="/annonce" data-drupal-link-system-path="annonce"><i class="fas fa-newspaper fa-lg"></i> Annonces</a>
               </li>
               <li>
                  <a href="/article" data-drupal-link-system-path="article"><i class="fas fa-file-alt fa-lg"></i> Articles</a>
               </li>
            </ul>
      </li>
      <li>
         <a href="/profil" data-drupal-link-system-path="profil"><i class="fas fa-id-card fa-lg"></i> Profils</a>
      </li>
   </ul>
</nav>

这是我的 JS 代码。有问题。

(function ($) {

  $(".collapse-change-icon").on('shown.bs.collapse', function () {
       $(this).find('[data-fa-i2svg]').removeClass("fa-plus-circle").addClass("fa-minus-circle");
  });

  $(".collapse-change-icon").on('hide.bs.collapse', function () {
       $(this).find('[data-fa-i2svg]').removeClass("fa-minus-circle").addClass("fa-plus-circle");
  });

})(window.jQuery);

Answer 1

您没有为下拉菜单使用正确的 bootstrap 事件。试试这个。

            jQuery(document).ready(function ($) {
                $(".dropdown").on('shown.bs.dropdown', function () {    
                    $(this).find('[data-fa-i2svg]').removeClass("fa-plus-circle").addClass("fa-minus-circle");
                });

                $(".dropdown").on('hidden.bs.dropdown', function () {
                    $(this).find('[data-fa-i2svg]').removeClass("fa-minus-circle").addClass("fa-plus-circle");
                });
            });

REf: https://getbootstrap.com/docs/3.3/javascript/#dropdowns-events

如何用JS更改折叠菜单图标？

How to change the collapse menu icon with JS?

javascript

collapse

twitter-bootstrap

font-awesome