更改可折叠 MaterializeCss 上的图标

Question

我已经阅读了一些 Whosebug 的答案来完成这项工作，但是 none 其中似乎有效或给出了任何错误来解决这个问题。

我正在尝试将打开时的图标从 add 更改为 remove。

我当前的代码：

<ul class="collapsible z-depth-0">
     <li>
       <div class="collapsible-header"><i class="material-icons">add</i>Feedback (4)</div>
       <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
     </li>
</ul>

和 JS 运行可折叠：

  $(document).ready(function(){
     $('.collapsible').collapsible();
   });

任何帮助都会很棒，我已经尝试了一些，但它们似乎非常针对特定情况。

Answer 1

这是 css 唯一的解决方案，它似乎有效

您在 .collapsible-header 中添加了两个图标，第一个可见，第二个不可见。由于当可折叠组件打开时唯一的状态 tha 发生变化，因此是 li 上的 '.active' class。你可以瞄准两个图标来交换可见性

 $(document).ready(function(){
     $('.collapsible').collapsible();
   });

.iconadd{
  display:inline-block ;
}
.iconremove{
  display:none !important;
}

li.active .collapsible-header .material-icons.iconadd{
  display: none;
}

li.active .collapsible-header .material-icons.iconremove{
  display: inline-block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
     
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <ul class="collapsible z-depth-0">
         <li>
           <div class="collapsible-header"><i class="material-icons iconadd">add</i>
             <i class="material-icons iconremove">remove</i>Feedback (4)</div>
           <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
         </li>
         <li>
           <div class="collapsible-header"><i class="material-icons iconadd">add</i>
             <i class="material-icons iconremove">remove</i>Feedback (4)</div>
           <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
         </li>
    </ul>

更改可折叠 MaterializeCss 上的图标

Change Icon on Collapsible MaterializeCss

css

jquery

materialize