Materialize UI：根据下拉选择动态改变折叠面板标题颜色
在Materialize UI的前端开发中，我们经常会遇到需要根据用户操作动态修改组件样式的需求。本文将介绍如何实现根据用户在下拉选择框中的选择，动态改变折叠面板标题颜色的功能，帮助开发者掌握Materialize UI中组件交互与样式动态修改的实现方法。
实现思路
整个功能的实现可以分为三个核心步骤：
- 首先引入Materialize UI的CSS和JS资源，搭建基础的页面结构，包含下拉选择框和折叠面板组件
- 给下拉选择框绑定change事件，监听用户的选择操作
- 在事件回调函数中，获取用户选择的值，根据值对应的颜色规则，动态修改折叠面板标题的样式
基础页面结构搭建
首先我们需要引入Materialize UI的相关资源，然后创建下拉选择框和折叠面板组件。下拉选择框提供几种可选的颜色，折叠面板则作为样式修改的目标组件。以下是完整的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">
<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="input-field col s12 m6 offset-m3">
<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>
<label>选择折叠面板标题颜色</label>
</div>
</div>
<!-- 折叠面板 -->
<ul class="collapsible">
<li>
<!-- 折叠面板标题，后续会动态修改这个元素的颜色 -->
<div class="collapsible-header" id="panelHeader">
<i class="material-icons">filter_drama</i>
可折叠面板标题
</div>
<div class="collapsible-body">
<span>这是折叠面板的内容区域，用户选择颜色后，上方标题的颜色会对应变化。</span>
</div>
</li>
</ul>
</div>
<!-- 引入Materialize JS和jQuery（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>
<script>
// 初始化下拉选择框
$(document).ready(function(){
$('select').formSelect();
// 初始化折叠面板
$('.collapsible').collapsible();
});
// 给下拉选择框绑定change事件
$('#colorSelect').on('change', function() {
// 获取用户选择的颜色值
const selectedColor = $(this).val();
// 获取折叠面板标题元素
const $panelHeader = $('#panelHeader');
// 先移除之前可能存在的颜色类，避免样式冲突
$panelHeader.removeClass('red blue green orange');
// 如果选择了有效颜色，添加对应的颜色类
if (selectedColor) {
$panelHeader.addClass(selectedColor);
}
});
</script>
</body>
</html>代码解析
上述代码首先引入了Materialize UI的样式表和脚本，同时引入了jQuery，因为Materialize的JS组件依赖jQuery运行。页面中创建了一个下拉选择框，提供了红、蓝、绿、橙四种颜色选项，接着创建了一个基础的折叠面板，给折叠面板的标题元素设置了id为panelHeader，方便后续通过JS获取该元素。
在script标签中，首先通过$(document).ready()初始化页面的Materialize组件，调用formSelect()方法初始化下拉选择框，调用collapsible()方法初始化折叠面板，这是使用Materialize组件的必要步骤，否则组件无法正常交互。
随后给下拉选择框绑定了change事件，当用户选择不同的选项时，会触发这个事件。事件回调中首先获取用户选择的颜色值，然后获取折叠面板的标题元素，先移除该元素上可能存在的颜色类，避免多次选择后样式叠加冲突，最后如果用户选择了有效颜色，就给标题元素添加对应的颜色类，Materialize内置了red、blue等颜色类，添加后就会直接生效，实现标题颜色的动态修改。
扩展说明
如果需要使用自定义颜色而不是Materialize内置的颜色类，也可以直接修改元素的style属性，比如将添加类的代码替换为：
// 自定义颜色映射
const colorMap = {
'red': '#f44336',
'blue': '#2196f3',
'green': '#4caf50',
'orange': '#ff9800'
};
if (selectedColor && colorMap[selectedColor]) {
$panelHeader.css('background-color', colorMap[selectedColor]);
}这样就能使用自定义的十六进制颜色值来修改标题的背景色，满足更多自定义样式的需求。另外如果需要修改的是标题文字颜色而不是背景色，只需要将添加的类改为文字颜色类，比如red-text，或者修改css方法的属性为color即可。