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

Posted 2023-05-07

【中文标题】如何更改完整可折叠 ul（Materialize，Html，Javascript，Css）的颜色？

【英文标题】：How to change the color of a full collapsible-ul(Materialize,Html,Javascript,Css)?

【发布时间】：2021-11-13 13:49:03

【问题描述】：

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

【参考方案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>

【讨论】：

感谢您的帮助，但这次更改只是文本的颜色，您知道如何更改标题/正文的背景吗？

background-color?

这不起作用

像这样：dojo.telerik.com/UzakORat

是的，我已经以与链接中相同的方式进行了尝试，但它不起作用。看来物化是个问题。