如何更改完整 collapsible-ul(Materialize,Html,Javascript,Css) 的颜色？

Question

我有 2 个 collapsible-lists 和 2 个按钮，如果我点击第一个按钮，第二个 <ul> 的所有 headers 的颜色应该改变（例如绿色）并且如果我点击第二个按钮，第二个 <ul> 中所有物体的颜色应该改变（例如黑色）。

我正在 JavaScript 中寻找解决方案（jQuery 也是可能的）。问题是我是这一切的新手，不知道如何解决这个任务。我很感谢你的帮助。

我的代码

 <ul class="collapsible" id="1">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

 <ul class="collapsible" id="2">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>
<button class="btn yellow" id="collapsible-header-green">Change collor of all headers ul(id="2")</button>
<button class="btn yellow" id="collapsible-body-green"> Change collor of all bodys ul(id="2")</button>

Answer 1

在按钮上单击添加或删除 css class:

$('#collapsible-header-green').on('click', function() {
    if($('#2 .red-header').length > 0) {
        $('#2 .collapsible-header').removeClass('red-header');
    } else {
        $('#2 .collapsible-header').addClass('red-header');
    }               
});
          
$('#collapsible-body-green').on('click', function() {
    if($('#2 .green-body').length > 0) {
        $('#2 .collapsible-body').removeClass('green-body');
    } else {
        $('#2 .collapsible-body').addClass('green-body');
    }
});

<style>
  .red-header {
    color: red;
  }
  
  .green-body {
    color: green;
  }
</style>

如何更改完整 collapsible-ul(Materialize,Html,Javascript,Css) 的颜色？

How to change the color of a full collapsible-ul(Materialize,Html,Javascript,Css)?

html

javascript

css

jquery

materialize

我的代码