Question

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

我的项目小提琴是here

子菜单扩展时我无法减负。请帮忙。

setState

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

向折叠的元素添加折叠的类

demo

Answer 2

我有两种方法可以实现这一目标

使用引导程序+ CSS + jQuery

在这种情况下，您必须删除并添加，即使用救命 bootstrap的navbar类。（我切换了超棒的字体类）

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

使用引导程序和jQuery切换加号和减号图标

2 个答案: