Карусель text()

261

02 ноября 2017, 06:46

  <ul class="collapsible" data-collapsible="accordion">
      <li>
        <div class="collapsible-header">
          <i class="material-icons">keyboard_arrow_right</i>
        </div>
      </li>
      <li>
        <div class="collapsible-header">
          <i class="material-icons">keyboard_arrow_right</i>
        </div>
      </li>
</ul>
    $(document).ready(function () {
      $('.collapsible-header').on('click', function () {
        if (!$(this).hasClass('active')) {
          $(this).children().text('keyboard_arrow_down');
          console.log(this.innerHTML  + ' активен' );
        } else {
          $(this).children().text('keyboard_arrow_right');
          console.log(this.innerHTML  + ' неактивен');
        }
      });

Нужно чтобы, когда collapsible-header становился active, в class="material-icons" текст заменялся на keyboard_arrow_down, соответственно другой в то же время когда становился не active менял на keyboard_arrow_right и обратно.

Answer 1

Например:

$('.collapsible-header').on('click', function (){ 
   
  var $this = $(this), // сам блок, по которому кликаем 
      $item = $this.closest('li'), // родитель блока (пункт списка) 
      $icon = $item.find('.material-icons'), // иконка внутри этого самого блока (в которой меняется текст) 
      $icons = $('.material-icons'); //все иконки из всех пунктов списка (в которых меняется текст) 
 
  if (!$item.hasClass('active')) { //Если в этом самом пункте списка (внутри блок на который кликаем), нет активного класса: 
    $item.addClass('active') // добавляем этому самому пункту списка активный класс 
      .siblings() // во всех остальных пунктах списка 
      .removeClass('active'); //убираем активный класс,  
     
    $icons.text('keyboard_arrow_right'); //у всех иконок возвращаем дефолтный текст 
    $icon.text('keyboard_arrow_down'); // а именно этой иконке в активном блоке (в блоке на который кликаем) ставим активный текст. 
     
  } else { // иначе, если клакать опять на этот же блок, активный класс удаляется, текст в иконке возвращается 
    $item.removeClass('active'); 
    $icon.text('keyboard_arrow_right'); 
  } 
   
});

.active { 
  color: red; 
} 
 
.collapsible-header { 
  cursor: pointer; 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
   
  <ul class="collapsible" data-collapsible="accordion"> 
      <li> 
        <div class="collapsible-header"> 
          <i class="material-icons">keyboard_arrow_right</i> 
        </div> 
      </li> 
      <li> 
        <div class="collapsible-header"> 
          <i class="material-icons">keyboard_arrow_right</i> 
        </div> 
      </li> 
  </ul>