materializeCSS可折叠活动更改图标。

我正在寻找一些可折叠的帮助我试图在它们处于活动状态时更改标题上的图标但是似乎无法解决问题，如果我点击另一个标题而不关闭第一个显示正确图标的标题。

这是一个包含我的问题示例的codepen。 http://codepen.io/FPC/pen/xZEWVY

这是我的代码：

 
 
 
 
 
 expand_more expand_less Article Title 
 
 
 Content Snipit 
 
 
 
 
 expand_more expand_less Article Title 
 
 
 Content Snipit 
 
 
 
 
 expand_more expand_less Article Title 
 
 
 Content Snipit 
 
 
 
 
 
  

这是我正在使用的JS

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

Answer 1

你不需要使用javascript

删除javascript并仅使用css

HTML

 
 
 
 expand_lessFirst
 
 
 
 expand_lessSecond
 
  

CSS

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

Answer 2

作为Hakan答案的补充，您可以使用collapsible-header类来避免更改可折叠类（手风琴内容）中的其他图标。 适合我的CSS代码是：

CSS

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

Answer 3

上述两种解决方案仍然可以翻转可折叠标题中的其他图标。 完美的解决方案是在图标中添加一个类。

 
 filter_drama Header 1 expand_less  

请注意，创建了“expand”类。 CSS将类似于上面的两个，只是将创建“扩展”

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