Question

我已经阅读了一些Stackoverflow的答案来完成此任务，但是似乎都没有一个工作或给出任何错误来解决这个问题。

我正在尝试将图标从obj.options.plotOptions.series.dataLabels.color = '#FF0000';更改为add。

我当前的代码：

remove

运行可折叠的JS：

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

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

Answer 1

这是css唯一的解决方案，似乎可行

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

 $(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上更改图标

1 个答案: