materializeCSS 可折叠活动更改图标。

Question

我正在寻求有关可折叠的帮助我正在尝试更改 header 上的图标，当它们处于活动状态时，但似乎无法解决如果我单击另一个 header 的问题没有关闭显示正确图标的第一个。

这是一个代码笔，其中包含我的问题示例。 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

删除 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

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

CSS

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

Answer 3

以上两种解决方案仍然翻转可折叠的其他图标header相反。完美的解决方案是在图标上添加一个 class。

<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" class。 CSS和上面两个类似，只是会创建"expand"

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

Answer 4

None 现有答案对我有用，他们不断反转其他图标

我加到了CSS

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

collapse/expand

<div class="collapsible-header">
<i class="material-icons iconcollapse">filter_drama</i>

materializeCSS 可折叠活动更改图标。

materializeCSS collapsible active change icon.

css

jquery

materialize

删除 javascript 并仅使用 css

html

css