javascript - 如何更改完整可折叠 ul（Materialize，Html，Javascript，Css）的颜色？

Question

我有 2 个可折叠列表和 2 个按钮，如果单击第一个按钮，则第二个按钮的所有标题的颜色<ul>都应更改（例如绿色），如果单击第二个按钮，则第二个按钮中所有主体的颜色<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>

标签： javascripthtmljquerycssmaterialize

Answer 1

在按钮上单击添加或删除 css 类：

$('#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>