Materialize折叠面板头部颜色动态切换：基于下拉选择的实现
在Materialize框架的页面开发中，折叠面板（Collapsible）是常用的交互组件，默认状态下面板头部的颜色是固定的。实际业务场景中，我们常常需要根据用户的操作动态调整面板头部的样式，比如通过下拉选择不同的颜色值，实时切换折叠面板的头部背景色。本文将详细介绍如何实现这一功能。
实现思路
整个功能的实现可以分为三个核心步骤：
- 编写基础的HTML结构，包含Materialize的折叠面板组件和颜色选择下拉框
- 引入Materialize的CSS和JS依赖，保证组件样式和交互正常生效
- 编写JavaScript逻辑，监听下拉框的变化事件，动态修改折叠面板头部的类名，实现颜色切换
基础HTML结构搭建
首先我们需要引入Materialize的相关资源，然后创建颜色选择下拉框和折叠面板组件。Materialize内置了多种颜色类，比如teal、red、blue等，我们可以直接使用这些类名来设置背景色。
<!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图标 -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="container">
<h4 class="center-align">折叠面板头部颜色动态切换</h4>
<!-- 颜色选择下拉框 -->
<div class="row">
<div class="col s12 m6 offset-m3">
<label>选择面板头部颜色</label>
<select id="colorSelect">
<option value="" disabled selected>请选择颜色</option>
<option value="teal">青色</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
<option value="orange">橙色</option>
<option value="purple">紫色</option>
</select>
</div>
</div>
<!-- 折叠面板组件 -->
<ul class="collapsible">
<li>
<!-- 面板头部，默认使用teal背景 -->
<div class="collapsible-header teal white-text" id="panelHeader">
<i class="material-icons">filter_drama</i>
第一个面板
</div>
<div class="collapsible-body">
<p>这是第一个折叠面板的内容区域，可以放置任意文本、表单或其他组件。</p>
</div>
</li>
<li>
<div class="collapsible-header teal white-text">
<i class="material-icons">place</i>
第二个面板
</div>
<div class="collapsible-body">
<p>这是第二个折叠面板的内容区域，点击面板头部可以展开或收起当前面板。</p>
</div>
</li>
<li>
<div class="collapsible-header teal white-text">
<i class="material-icons">whatshot</i>
第三个面板
</div>
<div class="collapsible-body">
<p>这是第三个折叠面板的内容区域，所有面板的头部颜色会同步切换。</p>
</div>
</li>
</ul>
</div>
<!-- 引入jQuery（Materialize JS依赖） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入Materialize JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
// 初始化下拉选择框
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
});
// 初始化折叠面板
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems);
});
</script>
</body>
</html>上面的代码中，我们给所有折叠面板的头部类添加了teal作为默认背景色，同时给第一个面板头部添加了id="panelHeader"方便后续操作。下拉框的选项值对应Materialize的颜色类名，这样后续可以直接使用选中的值作为类名。
动态切换颜色逻辑实现
接下来我们需要编写JavaScript代码，监听下拉框的变化事件，当选中不同的颜色时，移除所有面板头部原有的颜色类，添加新的选中颜色类，同时保留white-text类保证文字颜色为白色，避免背景色过深导致文字看不清。
// 监听下拉框变化事件
document.getElementById('colorSelect').addEventListener('change', function() {
// 获取选中的颜色值
var selectedColor = this.value;
// 获取所有折叠面板头部元素
var panelHeaders = document.querySelectorAll('.collapsible-header');
// 遍历所有面板头部，修改颜色类
panelHeaders.forEach(function(header) {
// 移除所有Materialize颜色类（排除white-text和其他非颜色类）
// 这里直接移除所有可能的旧颜色类，也可以记录旧类再移除，这里简化逻辑
var classList = header.className.split(' ');
var newClassList = [];
for (var i = 0; i < classList.length; i++) {
// 过滤掉颜色类，保留其他类（比如white-text、collapsible-header）
if (!['teal', 'red', 'blue', 'green', 'orange', 'purple'].includes(classList[i])) {
newClassList.push(classList[i]);
}
}
// 添加新的颜色类和文字白色类
newClassList.push(selectedColor);
if (!newClassList.includes('white-text')) {
newClassList.push('white-text');
}
// 更新类名
header.className = newClassList.join(' ');
});
});这段代码的核心逻辑是：当下拉框的值发生变化时，先获取所有折叠面板的头部元素，然后遍历每个头部元素，移除原有的颜色类名，添加新的选中颜色类名，同时保证white-text类存在，避免文字颜色和背景色冲突。
功能测试与说明
完成代码编写后，打开页面可以看到默认所有折叠面板头部是青色背景。点击下拉框选择不同的颜色，比如选择“红色”，所有折叠面板的头部背景会立即切换为红色，文字保持白色清晰可见。如果选择其他颜色，也会同步生效。
如果需要只切换单个面板的颜色，可以修改选择器，只操作对应id的面板头部即可，逻辑和上述代码类似，只是遍历的元素范围不同。
注意Materialize的颜色类名都是单个单词，和下拉框的value值完全一致，所以可以直接将选中的值作为类名使用，不需要额外的映射关系，这也是我们选择下拉框value直接对应颜色类名的原因。