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

Question

我有一个侧边栏，它由包含子菜单的列表组成。菜单未展开时的加号图标。展开菜单时的减号图标。相应地，应该在图标之间进行切换。

我的项目小提琴在这里

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

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

将折叠的类添加到封闭元素

演示

Answer 2

我有两种方法来实现这个

1. 使用bootstrap+CSS+jquery

   在这种情况下，您必须删除和添加，即使用帮助bootstrap的导航栏类。(我切换了字体真棒类(

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

2. 使用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();
});