Сворачиваемый значок активного изменения materializeCSS.

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

Вот codepen с примером моей проблемы. http://codepen.io/FPC/pen/xZEWVY

вот мой код:

<div class="container">
  <div class="row">
    <div class="col s6">
      <ul class="collapsible popout" data-collapsible="accordion">
        <li>
          <div class="collapsible-header">
            <i class="material-icons right more">expand_more</i>
            <i class="material-icons right less" style="display: none">expand_less</i>
            Article Title
          </div>
          <div class="collapsible-body">
            <p>
              Content Snipit        
            </p>
          </div>
        </li>
        <li>
          <div class="collapsible-header">
            <i class="material-icons right more">expand_more</i>
            <i class="material-icons right less" style="display: none">expand_less</i>
            Article Title
          </div>
          <div class="collapsible-body">
            <p>
              Content Snipit
            </p>
          </div>
        </li>
        <li>
          <div class="collapsible-header">
            <i class="material-icons right more">expand_more</i>
            <i class="material-icons right less" style="display: none">expand_less</i>
            Article Title
          </div>
          <div class="collapsible-body">
            <p>
              Content Snipit
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

вот JS, который я использую

    $(document).ready(function(){
  $( ".collapsible-header" ).click(function() {
      $(".more",this).toggle()
      $(".less", this).toggle()
  });
});

jquery css materialize
person FPcond    schedule 26.12.2015    source источник

Ответы (4)


arrow_upward
26
arrow_downward

Вам не нужно использовать javascript для этого

удалить javascript и использовать только css

HTML

<ul class="collapsible" data-collapsible="accordion">
  <li>
      <div class="collapsible-header">
       <i class="material-icons">expand_less</i>First</div>
   </li>
   <li>
      <div class="collapsible-header">
       <i class="material-icons">expand_less</i>Second</div>
   </li>
</ul>

css

  .collapsible li.active i {
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}
person Hakan    schedule 28.12.2015
comment
Этот ответ помог мне. Я также добавил эффект перехода CSS, добавив transition: transform 200ms; к селектору .active, на который вы ссылаетесь, а затем к почти идентичному селектору, в котором отсутствует класс .active. Таким образом, он анимирует переход как в активное состояние, так и из него. - person Marc; 25.07.2019

arrow_upward
9
arrow_downward

В дополнение к ответу Хакана вы можете использовать класс collapsible-header, чтобы избежать изменения других значков в сворачиваемом классе (содержимое аккордеона) . Код CSS, который работал у меня:

CSS

.collapsible-header.active i {
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
person The Heavy Rhino    schedule 10.03.2016

arrow_upward
1
arrow_downward

Приведенные выше два решения по-прежнему переворачивают другие значки в сворачиваемом заголовке наоборот. Идеальным решением будет добавить класс к иконке.

<div class="collapsible-header">
<i class="material-icons vertical-align">filter_drama</i>
Header 1
<i class="material-icons right expand">expand_less</i>
</div>

Обратите внимание, что создан класс «expand». CSS будет похож на два вышеприведенных, только будет создано «расширение».

.collapsible-header.active i.expand {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
  }
person cweitat    schedule 10.04.2018

arrow_upward
1
arrow_downward

Ни один из существующих ответов не помог мне, они продолжают инвертировать другие значки.

Я добавил в CSS

li.active .collapsible-header .material-icons.iconcollapse {
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}

Свернуть/развернуть

<div class="collapsible-header">
<i class="material-icons iconcollapse">filter_drama</i>
person Alberto Saint    schedule 03.02.2021