материализацияCSS разборная акция изменение значок.

Question

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

Вот код с примером моей проблемы. 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() 
    }); 
}); 

Answer 1

Вам не нужно использовать 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); 
} 

Answer 2

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

CSS

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