materializeCSS可折叠活动更改图标. [英] materializeCSS collapsible active change icon.

问题描述

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

I am looking for some help with collapsible I am trying to change the icon on the headers when they are active but cant seem to solve the problem of if I click on another header without closing the first one having the proper icon being displayed.

这是一个带有我问题示例的Codepen. http://codepen.io/FPC/pen/xZEWVY

Here is a codepen with an example of my issue. 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

here is the JS I am using

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

推荐答案

您不需要为此使用javascript

You don't need the use javascript for this

<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);
}

这篇关于materializeCSS可折叠活动更改图标.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！