使用引导程序和 jquery 切换加号和减号图标答案

【问题标题】：Toggle plus and minus icon using bootstrap and jquery使用引导程序和 jquery 切换加号和减号图标
【发布时间】：2019-04-18 15:10:28
【问题描述】：

我有一个侧边栏，其中包含包含子菜单的列表。菜单未展开时的加号图标。菜单展开时的减号图标。图标之间应该有相应的切换。

我的项目小提琴是here

当子菜单展开时，我无法得到减号。请帮忙。

.nav-side-menu ul .sub-menu li.main ul.collapsed:before,
.nav-side-menu li .sub-menu li.main:before {
    font-family: FontAwesome;
    content: "\f068";
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    vertical-align: middle;
}

【问题讨论】：

标签： jquery html twitter-bootstrap css css-transitions

【解决方案1】：

我有两种方法可以做到这一点

使用 bootstrap + CSS + jquery

在这种情况下，您必须删除并添加，即使用帮助引导程序的导航栏类。（我切换了字体真棒类）

HTML

 <nav  class="navbar-expand-lg navbar-dark fixed-top d-block d-lg-none">
  <div id="nav-mobile" class=" d-flex flex-row nav-flex-row">
    <div class="p-3 mr-auto"><img class="img img-fluid" src="img/png/logo.png" /> 
    </div>
   <div class="p-3">
    <span class="navbar-toggler navbar-toggler-right" data-toggle="collapse"
        data-target="#navbarResponsive" aria-controls="navbarResponsive" aria- 
        expanded="false" aria-label="Toggle navigation">
        <i class="fa fa-bars fa-2x" aria-hidden="false" style="color:white"></i>
    </span>
  </div>
</div>

<div class="collapse navbar-collapse nav-mobile-collapse" id="navbarResponsive">
  <div id="top-menu"  class="navbar-container collapsebar-main">
    <div style="flex:1" class="">
        <a class="active js-scroll-trigger " href="#about">About</a>
    </div>
    <div style="flex:1">
        <a class=" js-scroll-trigger" href="#product">Products</a>
    </div>
    <div style="flex:1">
        <a class=" js-scroll-trigger" href="#partners">Partners</a>
    </div>
    <div style="flex:1" class="testimonial-nav">
        <a class=" js-scroll-trigger" href="#testimonial">Testimonials</a>
    </div>
   </div>
  </div>

</nav>

JAVASCRIPT

 // Toggles between close and show icon (Navbar) 
 $(function(){
  $('#navbarResponsive')
  .on('shown.bs.collapse', function() {
    $(this)
      .parent()
      .find(".fa-bars")
      .removeClass("fa-bars")
      .addClass("fa-times");

   })
  .on('hidden.bs.collapse', function() {
     $(this)
      .parent()
      .find(".fa-times")
      .removeClass("fa-times")
      .addClass("fa-bars");
   });

});

使用 Jquery

在这种情况下，您只需找到图像标签并使用 jquery 的切换功能对其进行切换

HTML

<div id="infoToggler">
  <img src="image 1 url" width="60px" height="60px"/>
  <img src="image 2 url" width="60px" height="60px" style="display:none"/>
</div>

JAVASCRIPT

$("#infoToggler").click(function() {
  $(this).find('img').toggle();
});

【讨论】：

【解决方案2】：

把你的css改成：

.nav-side-menu ul .sub-menu li.main.collapsed:before  {
  font-family: FontAwesome;
  content: "\f067";
  display: inline-block;
  padding-left: 8px;
  padding-right: 8px;
  vertical-align: middle;
}
.nav-side-menu ul .sub-menu li.main:before {
  font-family: FontAwesome;
  content: "\f068";
  display: inline-block;
  padding-left: 8px;
  padding-right: 8px;
  vertical-align: middle;
}
.collapsed.sub-main:before {
   font-family: FontAwesome;
  content: "\f067";
  display: inline-block; 
 margin-left:28px;
}
.sub-main:before {
   content: "\f068";
  font-family: FontAwesome;
    display: inline-block; 
 margin-left:28px;
}

为闭合元素添加一个折叠的类

demo

【讨论】：

感谢您的帮助。效果很好。再次感谢您。
别忘了点击绿色对勾:)