[英]How to change the collapse menu icon with JS?
I have a main menu (collapse) that uses Bootstrap 3.3.7 and Font Awesome 5.0.1 我有一个使用Bootstrap 3.3.7和Font Awesome 5.0.1的主菜单(折叠)
What I am looking for : 我在寻找什么:
When the menu is closed, a "plus" icon is displayed. 关闭菜单后,将显示“加号”图标。
When the menu is open, a "minus" icon is displayed. 打开菜单时,显示“减号”图标。
The "plus" icon is displayed on the menu but does not change. “加号”图标显示在菜单上,但不会更改。
I think there is a problem with my JS code. 我认为我的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>
Here is my JS code. 这是我的JS代码。 Something is wrong with it.
它有问题。
(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);
You have not used the right bootstrap events for dropdown. 您尚未使用正确的引导事件进行下拉。 Try this one.
试试这个。
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 REF: https ://getbootstrap.com/docs/3.3/javascript/#dropdowns-events
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.