动态改变Materialize折叠面板标题颜色：基于下拉选择的交互式UI更新
在Materialize框架的前端开发中，折叠面板（Collapsible）是常用的组件，用于展示可展开/收起的内容区域。有时我们需要根据用户的选择动态调整折叠面板的视觉样式，比如修改标题的背景色。本文将介绍如何通过下拉选择框触发事件，动态更新Materialize折叠面板的标题颜色，实现交互式的UI效果。
实现思路
整个功能的核心逻辑分为三步：
- 首先在页面中引入Materialize的CSS和JS资源，构建包含下拉选择框和折叠面板的基础页面结构
- 为下拉选择框绑定change事件，当用户选择不同选项时获取对应的颜色值
- 通过jQuery或者原生JS选中折叠面板的标题元素，动态修改其背景色样式
基础页面结构搭建
首先我们需要引入Materialize的官方资源，然后创建下拉选择框和折叠面板。注意Materialize的折叠面板需要添加collapsible类，并且初始化后才能正常工作。下面是完整的HTML结构代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态修改折叠面板标题颜色</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: 30px;">
<h4>动态修改折叠面板标题颜色</h4>
<div class="row">
<div class="input-field col s12 m6">
<select id="colorSelect">
<option value="" disabled selected>请选择标题颜色</option>
<option value="#e3f2fd">浅蓝色</option>
<option value="#e8f5e9">浅绿色</option>
<option value="#fff3e0">浅橙色</option>
<option value="#fce4ec">浅粉色</option>
<option value="#f3e5f5">浅紫色</option>
</select>
<label>选择折叠面板标题背景色</label>
</div>
</div>
<ul class="collapsible">
<li>
<div class="collapsible-header" id="panelHeader1">
<i class="material-icons">filter_drama</i>
第一个折叠面板
</div>
<div class="collapsible-body">
<span>这是第一个折叠面板的内容区域，可根据需要填充任意文本或组件。</span>
</div>
</li>
<li>
<div class="collapsible-header" id="panelHeader2">
<i class="material-icons">place</i>
第二个折叠面板
</div>
<div class="collapsible-body">
<span>这是第二个折叠面板的内容区域，支持多行内容展示。</span>
</div>
</li>
<li>
<div class="collapsible-header" id="panelHeader3">
<i class="material-icons">whatshot</i>
第三个折叠面板
</div>
<div class="collapsible-body">
<span>这是第三个折叠面板的内容区域，默认收起状态。</span>
</div>
</li>
</ul>
</div>
<!-- 引入jQuery -->
<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({
accordion: true
});
});
</script>
</body>
</html>上面的代码中，我们给每个折叠面板的<div class="collapsible-header">都添加了唯一的id，方便后续通过JS选中元素。下拉选择框的选项值直接对应颜色的十六进制码，简化后续的取值逻辑。
动态修改标题颜色的逻辑实现
接下来我们需要编写事件监听代码，当用户在下拉框中选择颜色后，自动修改所有折叠面板标题的背景色。这里我们使用jQuery来简化DOM操作，代码如下：
// 监听下拉选择框的change事件
$('#colorSelect').on('change', function() {
// 获取用户选择的颜色值
var selectedColor = $(this).val();
// 如果未选择有效值，直接返回
if (!selectedColor) return;
// 选中所有折叠面板的标题元素，修改背景色
// 同时保留原有的文字颜色和对齐样式，只追加背景色
$('.collapsible-header').css('background-color', selectedColor);
});这段代码的核心逻辑是：当用户切换下拉选项时，先获取选中的颜色值，然后选中页面中所有的.collapsible-header元素，统一设置其background-color样式为选中的颜色。如果需要单独修改某一个面板的标题颜色，只需要将选择器改为对应面板的id即可，比如$('#panelHeader1').css('background-color', selectedColor);就可以只修改第一个面板的标题颜色。
扩展说明
如果需要实现更复杂的效果，比如不同选项对应不同面板的颜色，可以在下拉框的选项中添加自定义属性，比如给第一个选项加data-panel="panelHeader1"，然后在事件处理中根据属性判断要修改哪个面板。另外如果要兼容Materialize的主题色，也可以直接使用Materialize内置的颜色类，比如blue lighten-4，这时修改样式的方式从设置css改为添加类：$('.collapsible-header').addClass('blue lighten-4').removeClass('green lighten-4 red lighten-4');，避免样式冲突。
整个实现过程不需要修改Materialize的源码，完全基于框架提供的初始化方法和原生DOM操作完成，兼容性强，适合在各类Materialize项目中使用。