动态修改Materialize折叠面板标题颜色的实用教程
Materialize是一款基于Material Design设计规范的响应式前端框架，其中的折叠面板（Collapsible）组件常用于展示可展开/收起的内容区块。在实际开发中，我们经常会遇到需要动态修改折叠面板标题颜色的需求，比如根据内容状态标记不同颜色、响应用户交互变更样式等。本文将详细介绍实现该功能的完整方案。
前置准备
在开始操作前，请确保你的项目已经正确引入Materialize的相关资源。如果是本地开发环境，可以直接引入本地文件；如果是测试场景，也可以使用CDN资源。以下是基础的HTML结构示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态修改Materialize折叠面板标题颜色</title>
<!-- 引入Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- 引入Materialize JS，依赖jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="container">
<h4>动态修改折叠面板标题颜色示例</h4>
<!-- 基础折叠面板结构 -->
<ul class="collapsible">
<li>
<div class="collapsible-header">
<i class="material-icons">filter_drama</i>
第一个面板标题
</div>
<div class="collapsible-body"><span>第一个面板的内容区域</span></div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">place</i>
第二个面板标题
</div>
<div class="collapsible-body"><span>第二个面板的内容区域</span></div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">whatshot</i>
第三个面板标题
</div>
<div class="collapsible-body"><span>第三个面板的内容区域</span></div>
</li>
</ul>
<div class="row">
<div class="col s12">
<button id="changeColorBtn" class="btn waves-effect waves-light">修改第一个面板标题颜色</button>
<button id="resetColorBtn" class="btn waves-effect waves-light grey">重置所有标题颜色</button>
</div>
</div>
</div>
<script>
// 初始化折叠面板组件
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems);
});
</script>
</body>
</html>上述代码搭建了基础的页面结构，包含三个折叠面板和两个操作按钮，同时完成了折叠面板的初始化。注意这里的折叠面板标题区域对应的是<div class="collapsible-header">标签，我们后续的操作都是针对这个元素进行的。
实现动态修改标题颜色
动态修改颜色的核心思路是通过JavaScript获取目标折叠面板的标题元素，然后修改其行内样式或者对应的CSS类。下面分两种常见场景介绍具体实现方式。
场景1：直接修改行内样式
这种方式适合临时、单次修改样式的场景，操作简单直接，优先级也比较高。我们给“修改第一个面板标题颜色”按钮绑定点击事件，点击时修改第一个面板的标题颜色：
// 获取修改颜色按钮
const changeColorBtn = document.getElementById('changeColorBtn');
// 绑定点击事件
changeColorBtn.addEventListener('click', function() {
// 获取第一个折叠面板的标题元素
// 折叠面板的结构是ul.collapsible > li > div.collapsible-header
const firstHeader = document.querySelector('.collapsible li:first-child .collapsible-header');
if (firstHeader) {
// 直接设置行内样式修改颜色，这里设置为红色
firstHeader.style.color = '#e53935';
// 如果需要同时修改背景色，可以添加下面的代码
// firstHeader.style.backgroundColor = '#ffebee';
}
});上面的代码通过document.querySelector方法精准定位到第一个面板的标题元素，然后直接修改其style.color属性即可完成颜色变更。如果需要恢复原有颜色，只需要将color属性设置为空字符串，或者重置为原来的颜色值。
场景2：通过切换CSS类修改颜色
如果项目中需要多次切换不同颜色，或者颜色样式有统一规范，建议使用CSS类的方式实现，这样便于样式维护。首先我们在CSS中定义几个颜色类：
/* 自定义折叠面板标题颜色类 */
.collapsible-header.red-header {
color: #e53935;
}
.collapsible-header.blue-header {
color: #1e88e5;
}
.collapsible-header.green-header {
color: #43a047;
}
/* 重置样式的类，移除所有自定义颜色 */
.collapsible-header.default-header {
color: inherit;
}然后修改按钮的点击事件逻辑，通过添加、移除类来切换颜色：
// 获取修改颜色按钮和重置按钮
const changeColorBtn = document.getElementById('changeColorBtn');
const resetColorBtn = document.getElementById('resetColorBtn');
// 修改颜色按钮点击事件：给第一个面板标题添加红色类，移除其他颜色类
changeColorBtn.addEventListener('click', function() {
const firstHeader = document.querySelector('.collapsible li:first-child .collapsible-header');
if (firstHeader) {
// 先移除所有可能的颜色类
firstHeader.classList.remove('red-header', 'blue-header', 'green-header', 'default-header');
// 添加目标颜色类
firstHeader.classList.add('red-header');
}
});
// 重置按钮点击事件：移除所有自定义颜色类，恢复默认样式
resetColorBtn.addEventListener('click', function() {
// 获取所有折叠面板的标题元素
const allHeaders = document.querySelectorAll('.collapsible .collapsible-header');
allHeaders.forEach(header => {
// 移除所有自定义颜色类
header.classList.remove('red-header', 'blue-header', 'green-header');
// 添加默认类恢复样式
header.classList.add('default-header');
// 短暂延迟后移除默认类，避免影响后续样式切换
setTimeout(() => {
header.classList.remove('default-header');
}, 10);
});
});扩展场景：根据面板状态动态修改颜色
实际开发中，我们可能还需要根据面板的展开/收起状态自动修改标题颜色，比如展开时显示蓝色，收起时显示黑色。Materialize的折叠面板组件提供了对应的事件回调，我们可以通过监听事件实现这个需求：
// 初始化折叠面板时绑定事件
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems, {
// 监听面板展开事件
onOpenStart: function(el) {
// el是当前展开的li元素，找到内部的标题元素
const header = el.querySelector('.collapsible-header');
if (header) {
header.style.color = '#1e88e5'; // 展开时设为蓝色
}
},
// 监听面板收起事件
onCloseStart: function(el) {
const header = el.querySelector('.collapsible-header');
if (header) {
header.style.color = '#000000'; // 收起时设为黑色
}
}
});
});上面的代码在初始化折叠面板时传入了配置参数，绑定了onOpenStart和onCloseStart两个回调函数，分别在面板开始展开和开始收起时触发，在回调中修改对应标题的颜色即可实现状态联动效果。
注意事项
- Materialize默认的折叠面板标题有自带的样式优先级，如果使用行内样式修改，优先级会高于默认CSS，无需额外处理；如果使用CSS类修改，需要确保自定义类的优先级不低于框架默认样式，必要时可以在类前面加上父级选择器提升优先级，比如
.collapsible .collapsible-header.red-header。 - 如果页面中有多个折叠面板实例，注意不要误操作其他实例的元素，建议通过具体的父级容器限定选择器的范围，避免样式错乱。
- 如果是动态生成的折叠面板内容，需要在内容生成完成后再执行初始化和样式修改的逻辑，否则可能无法获取到对应的DOM元素。