MaterializeCSS Collapsible onOpen changeヘッダーのアイコン

Question

トグル折りたたみのアイコンを変更しようとしています。このトリガーをドキュメントに従って実行する方法がわかりません。

$('.collaps_roles_permission').collapsible({ 
    accordion: true,  
    onOpen: function(el){ 
     //$('li.roles_icon', this).html('remove'); 
     console.log(el); 
     console.log(el[0]); 
    }, 
    onClose:function(el){ 
     //switch back icon to normal 
    } 

}); 

トグル時に折りたたみ可能なヘッダーを変更するにはどうすればよいですか？あなたのonOpen関数の内部

<div class="collapsible-header"> 
    <i class="material-icons roles_icon">add</i> 
    {{ $r->display_name }} 
</div> 

Answer 1

、ヘッダにあるアイコンを見つけるためにelを使用しています。

onOpen: function(el) { 
    $(el).find('.collapsible-header i').text('remove'); 
} 

Answer 2

あなたは、単にjQueryの.clickのイベントを使用してこれを行うことができます。

$('.collapsible').click(function() { 
    $(this).collapsible({ 
     onOpen: function(el) { el.find('.collapsible-header').text('Changed'); } 
    }); 
});