Переключите значок плюс и минус с помощью начальной загрузки и jquery - PullRequest
Новая
       38

Переключите значок плюс и минус с помощью начальной загрузки и jquery

0 голосов
/ 15 ноября 2018

У меня есть боковая панель, которая состоит из списка, содержащего подменю. Значок плюса, когда меню не раскрыто. Значок минуса, когда меню развернуто.соответственно должно быть переключение между значком.

Моя скрипта проекта здесь

Я не могу получить минус, когда подменю расширяется. Пожалуйста, помогитеout. 

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

Ответы [ 2 ]

0 голосов
/ 16 ноября 2018

У меня есть два способа добиться этого

  1. Использование начальной загрузки + CSS + jquery

    В этом случае вы должны удалить и добавить, то есть переключить класс изображения с помощью Помогите загрузочного класса navbar. (Я переключил класс font-awesome)

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

});

  1. Использование 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();
});
0 голосов
/ 15 ноября 2018

Измените свой 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;
}

добавьте свернутый класс к закрытым элементам

демо

...