0
  <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 и обратно.

1 ответ 1

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>

5
  • 1
    Спасибо за помощь. Пытался через переменные, но почему-то не выходило, а это выход.
    – COdek
    31 окт 2017 в 17:35
  • $('.collapsible-header').on('click', function () { if (!$(this).hasClass('active')) { $(this).children().text('keyboard_arrow_down'); $(this).closest('li').find('.material-icons').text('keyboard_arrow_right'); console.log(this.innerHTML + ' активен' ); } else { $(this).children().text('keyboard_arrow_right'); console.log(this.innerHTML + ' неактивен'); }
    – COdek
    31 окт 2017 в 19:18
  • Почему вот так не работает, ума не приложу?
    – COdek
    31 окт 2017 в 19:18
  • @COdek, я постаралась расписать свой ответ, что происходит в jquery коде, может быть так станет понятней что у вас не так
    – SVE
    31 окт 2017 в 20:15
  • @COdek. jsbin.com/yomudic/edit?html,js,output
    – SVE
    31 окт 2017 в 20:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.