Materialize 折叠面板头部颜色动态修改：基于下拉选择的实现
在使用Materialize框架开发后台管理系统或交互页面时，折叠面板（Collapsible）是非常常用的组件，而很多时候我们需要根据用户的操作动态修改折叠面板头部的颜色，比如通过下拉选择切换不同的状态标识色。本文将详细介绍如何实现基于下拉选择动态修改Materialize折叠面板头部颜色的功能。
实现思路
整个功能的实现可以分为三个核心步骤：
- 首先引入Materialize的CSS和JS资源，构建基础的折叠面板和下拉选择组件
- 给下拉选择组件绑定change事件，当用户选择不同选项时触发颜色修改逻辑
- 通过JavaScript动态获取选中的颜色值，修改折叠面板头部的样式类或者内联样式，实现颜色切换
基础页面结构搭建
首先我们需要先引入Materialize的相关资源，然后构建包含下拉选择和折叠面板的基础页面，代码如下：
<!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" style="margin-top: 50px;">
<!-- 下拉选择区域 -->
<div class="row">
<div class="col s12 m6">
<label>选择折叠面板头部颜色</label>
<select id="colorSelect">
<option value="" disabled selected>请选择颜色</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
<option value="orange">橙色</option>
</select>
</div>
</div>
<!-- 折叠面板区域 -->
<div class="row">
<div class="col s12">
<ul class="collapsible" id="demoCollapsible">
<li>
<div class="collapsible-header" id="panelHeader">
<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>
</ul>
</div>
</div>
</div>
<!-- 引入jQuery，方便DOM操作 -->
<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).ready(function(){
$('select').formSelect();
// 初始化折叠面板
$('.collapsible').collapsible();
});
</script>
</body>
</html>上面的代码中，我们通过Materialize提供的<select>组件构建了颜色选择器，同时用<ul class="collapsible">构建了标准的折叠面板，并且初始化了两个Materialize组件，保证页面渲染正常。
动态修改颜色的实现逻辑
接下来我们需要添加JavaScript逻辑，监听下拉选择的变更事件，当用户选择不同颜色时，动态修改第一个折叠面板的头部颜色。Materialize中组件的背景色可以通过对应的颜色类实现，比如red类对应红色背景，blue类对应蓝色背景，以此类推。
我们在之前的页面<script>标签中添加如下逻辑：
// 监听下拉选择的变更事件
$('#colorSelect').on('change', function() {
// 获取用户选中的颜色值
const selectedColor = $(this).val();
// 获取折叠面板的头部元素
const panelHeader = $('#panelHeader');
// 定义所有可能出现的颜色类，方便后续移除
const colorClasses = ['red', 'blue', 'green', 'orange', 'red lighten-2', 'blue lighten-2'];
// 先移除头部元素上已有的所有颜色类
colorClasses.forEach(cls => {
panelHeader.removeClass(cls);
});
// 如果选中的颜色为空，恢复默认样式
if (!selectedColor) {
panelHeader.css('background-color', '');
return;
}
// 添加选中的颜色类，同时可以加一个lighten-2让颜色更浅，更符合Materialize的设计风格
panelHeader.addClass(`${selectedColor} lighten-2`);
// 如果需要直接修改内联样式，也可以这样写，优先级更高
// panelHeader.css('background-color', selectedColor);
});这段逻辑的核心是先清理掉头部元素上旧的颜色类，避免样式冲突，然后根据用户选择的颜色添加新的样式类。如果选择的是默认占位选项，就清空自定义样式，恢复默认的折叠面板头部样式。
扩展：批量修改所有折叠面板头部颜色
如果我们需要修改所有折叠面板的头部颜色，只需要调整选择器的范围即可，将获取单个头部元素的代码改为获取所有头部元素：
$('#colorSelect').on('change', function() {
const selectedColor = $(this).val();
// 获取所有折叠面板头部元素
const panelHeaders = $('.collapsible-header');
const colorClasses = ['red', 'blue', 'green', 'orange', 'red lighten-2', 'blue lighten-2'];
panelHeaders.each(function() {
const $this = $(this);
colorClasses.forEach(cls => {
$this.removeClass(cls);
});
if (selectedColor) {
$this.addClass(`${selectedColor} lighten-2`);
} else {
$this.css('background-color', '');
}
});
});这样修改后，用户选择颜色时，页面中所有折叠面板的头部都会同步切换为选中的颜色，适合需要统一状态标识的场景。
注意事项
- Materialize的颜色类默认是背景色加文字白色，如果添加颜色类后文字显示异常，可以额外添加
white-text类保证文字可读性 - 如果页面中有多个折叠面板需要独立控制颜色，可以给每个折叠面板头部添加不同的id，在事件中分别处理
- 如果要保存用户的颜色选择状态，可以结合localStorage，在页面加载时读取保存的颜色值并自动应用