使用 bootstrap 和 jquery 切换加号和减号图标

Question

我有一个侧边栏，它由包含子 menu.A 的列表组成，当菜单展开时没有 expanded.A 减号图标。应该相应地在图标之间切换。

我的项目 fiddle 是 here

当子菜单得到 expanded.please 帮助时，我无法得到减号。

.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;
}

Answer 1

把你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;
}

添加一个class折叠到闭合元素

demo

Answer 2

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

使用 bootstrap + CSS + jquery

在这种情况下，您必须删除并添加，即切换图像的 class 与帮助 bootstrap 的导航栏 class。（我已经切换字体真棒 class）

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();
});

使用 bootstrap 和 jquery 切换加号和减号图标

Toggle plus and minus icon using bootstrap and jquery

html

css

jquery

css-transitions

twitter-bootstrap