Materialize 折叠面板头部颜色动态修改：基于下拉选择的实现-html教程-PHP中文网

Materialize 折叠面板头部颜色动态修改：基于下拉选择的实现

本教程旨在解决 Materialize CSS 框架中，根据下拉菜单的选择动态改变折叠面板头部文本颜色的问题。文章将深入探讨在存在嵌套元素及 CSS 特异性影响下，如何精准定位并修改目标元素的样式，提供详细的 JavaScript、HTML 和 CSS 代码示例，确保开发者能够成功实现交互式 UI 效果。

概述

在构建交互式 web 应用时，根据用户输入动态调整 ui 元素样式是一种常见的需求。materialize css 提供了美观的折叠面板（collapsible）和下拉选择（select）组件，但当需要根据下拉选择结果修改折叠面板头部颜色时，可能会遇到一些 css 特异性问题。本教程将引导您完成这一过程，确保您能够正确地定位并修改目标元素的样式。

环境准备

为了运行本教程中的示例代码，您需要引入 Materialize CSS 库和 jQuery。确保您的 HTML 文件头部包含以下链接和脚本：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>

登录后复制

问题分析与初始尝试

假设我们有一个 Materialize 折叠面板，其内部包含一个下拉选择框。我们的目标是当下拉框选择特定值时，改变该折叠面板头部的文本颜色。

HTML 结构示例：

<ul class="collapsible">
  <li>
    <div class="collapsible-header #3d5afe indigo accent-4"><b><h3>Animal Vegetable or Mineral?</h3></b></div>
    <div class="collapsible-body #536dfe indigo accent-2">
      <span>      
        <div class ="row">
          <div class="input-field col s12">
            <select id ="question1">
              <option value="" disabled selected>Are you human?</option>
              <option value="1">Yes</option>
              <option value="2">No</option>
            </select>
            <label class="white-text"><i>Turing Test?</i></label>
          </div>
        </div>
      </span>
    </div>
  </li>
</ul>

登录后复制

在这个结构中，折叠面板的头部文本 "Animal Vegetable or Mineral?" 实际上被包裹在 <h3> 标签内，并且 <h3> 标签又嵌套在 <b> 标签中，最终位于 .collapsible-header 内部。

初始 JavaScript 尝试：

一个直观的想法是直接通过 $('.collapsible-header').css('color', 'red'); 来修改头部颜色。然而，这可能不会按预期工作。

// 初始尝试 (可能不生效)
function colormebadd() {
  if (sel.value === '1') {
    $('.collapsible-header').css('color', '#f44336 red'); // 尝试修改 .collapsible-header 的颜色
  }
}

登录后复制

问题根源：CSS 特异性

不生效的原因在于 CSS 的特异性（Specificity）。在我们的 HTML 结构中，<h3> 标签可能已经被一些默认样式或自定义样式赋予了颜色。当父元素 .collapsible-header 被赋予颜色时，如果其子元素 <h3> 拥有更具特异性的颜色规则（例如，直接作用于 h3 标签的样式），那么子元素的颜色规则将优先于父元素的规则。因此，直接修改 .collapsible-header 的颜色并不会改变其内部 <h3> 文本的颜色。

解决方案：精准定位目标元素

要解决这个问题，我们需要直接定位到实际包含文本的 <h3> 标签，并修改它的颜色。

修正后的 JavaScript 代码：

图改改

在线修改图片文字

455

查看详情

// Materialize 初始化
$(document).ready(function() {
  $('.collapsible').collapsible(); // 初始化折叠面板
  $('select').formSelect();        // 初始化下拉选择框
});

// 获取下拉选择框元素
var sel = document.getElementById('question1');

// 为下拉选择框添加 'change' 事件监听器
sel.addEventListener("change", colormebadd);

// 事件处理函数
function colormebadd() {
  // 检查下拉选择框的值
  if (sel.value === '1') {
    // 精准定位到 collapsible-header 内部的 h3 元素，并修改其颜色
    $('h3').css('color', 'red'); 
    // 注意：如果页面有多个 h3 元素，这会修改所有 h3 的颜色。
    // 更精确的做法是只修改当前折叠面板内的 h3，例如：
    // $(sel).closest('.collapsible-body').siblings('.collapsible-header').find('h3').css('color', 'red');
  }
}

登录后复制

在上述代码中，关键的修改是将 $('.collapsible-header').css('color', '...') 替换为 $('h3').css('color', 'red');。这确保我们直接作用于包含文本的 <h3> 元素，从而绕过 CSS 特异性问题。

注意事项：

选择器特异性： $('h3') 会选择页面上所有的 <h3> 元素。如果您的页面中有多个折叠面板，并且每个折叠面板都有一个 <h3> 标题，那么当一个下拉菜单被选中时，所有 <h3> 元素的颜色都会改变。
更精确的选择器（推荐）： 为了只修改当前折叠面板的头部颜色，您应该使用更精确的选择器。例如，可以从触发事件的 select 元素向上遍历 DOM 树，找到其最近的 .collapsible-body，然后找到其兄弟元素 .collapsible-header，最后在其内部查找 h3。
```
// 更精确的选择器示例
function colormebadd() {
  if (sel.value === '1') {
    // 从当前 select 元素向上找到最近的 .collapsible-body
    // 然后找到其兄弟元素 .collapsible-header
    // 最后在其内部找到 h3 元素并修改颜色
    $(sel).closest('.collapsible-body')
          .siblings('.collapsible-header')
          .find('h3')
          .css('color', 'red');
  }
}
```
登录后复制
这种方式确保了只有与当前下拉菜单关联的折叠面板头部颜色会被修改。

完整代码示例

为了提供一个可运行的示例，我们将整合 HTML、CSS 和 JavaScript。

page-css (CSS 文件内容):

h1 {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: white;
}

h2 {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: white;
}

h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: white; /* 初始设置 h3 为白色 */
}

/* Settings for Collapsibles */
.dropdown-content li span,
.select-wrapper input.select-dropdown {
  background-color: #536dfe;
  color: #ffc700;
}

.select-wrapper .caret {
  fill: #536dfe;
}

.collapsible,
.collapsible-header,
.collapsible-body {
  border: none !important;
}

登录后复制

page-JS (JavaScript 文件内容):

// Materialize 初始化
$(document).ready(function() {
  $('.collapsible').collapsible();
  $('select').formSelect();
});

// 获取第一个下拉选择框元素 (如果页面有多个，需要更精确的获取方式)
var sel = document.getElementById('question1');

// 为下拉选择框添加 'change' 事件监听器
sel.addEventListener("change", colormebadd);

// 事件处理函数
function colormebadd() {
  if (sel.value === '1') {
    // 使用更精确的选择器修改当前折叠面板的 h3 颜色
    $(sel).closest('.collapsible-body')
          .siblings('.collapsible-header')
          .find('h3')
          .css('color', 'red');
  } else {
    // 如果选择其他选项，可以将颜色恢复为默认或白色
    $(sel).closest('.collapsible-body')
          .siblings('.collapsible-header')
          .find('h3')
          .css('color', 'white');
  }
}

登录后复制

HTML 文件 (index.html):

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- 引入自定义 CSS -->
  <style>
    /* page-css 的内容直接放在这里，或者通过 <?!= include("page-css");?> 引入 */
    h1 { text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: white; }
    h2 { text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: white; }
    h3 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: white; }
    .dropdown-content li span, .select-wrapper input.select-dropdown { background-color: #536dfe; color: #ffc700; }
    .select-wrapper .caret { fill: #536dfe; }
    .collapsible, .collapsible-header, .collapsible-body { border: none !important; }
  </style>
</head>
<body style="background-color:#2f34d0;">

  <h1>Data Input Form</h1>

  <ul class="collapsible">
    <li>
      <div class="collapsible-header #3d5afe indigo accent-4"><b><h3>Animal Vegetable or Mineral?</h3></b></div>
      <div class="collapsible-body #536dfe indigo accent-2">
        <span>      
          <div class ="row">
            <div class="input-field col s12">
              <select id ="question1">
                <option value="" disabled selected>Are you human?</option>
                <option value="1">Yes</option>
                <option value="2">No</option>
              </select>
              <label class="white-text"><i>Turing Test?</i></label>
            </div>
          </div>

          <div class ="row">
            <div class="input-field col s12">
              <select id ="question2"> <!-- 更改 ID 以避免重复 -->
                <option value="" disabled selected>Are you a mineral?</option>
                <option value="1">Yes</option>
                <option value="2">No</option>
              </select>
              <label class="white-text"><i>Mineral?</i></label>
            </div>
          </div>
        </span>
      </div>
    </li>
    <!-- 可以添加更多折叠面板 -->
  </ul>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <!-- 引入自定义 JS -->
  <script>
    /* page-JS 的内容直接放在这里，或者通过 <?!= include("page-JS");?> 引入 */
    $(document).ready(function() {
      $('.collapsible').collapsible();
      $('select').formSelect();
    });

    // 为每个 select 元素添加事件监听器
    $('select').each(function() {
      var sel = this;
      sel.addEventListener("change", function() {
        if (sel.value === '1') {
          $(sel).closest('.collapsible-body')
                .siblings('.collapsible-header')
                .find('h3')
                .css('color', 'red');
        } else {
          $(sel).closest('.collapsible-body')
                .siblings('.collapsible-header')
                .find('h3')
                .css('color', 'white'); // 恢复默认颜色
        }
      });
    });
  </script>
</body>
</html>

登录后复制

注意： 在提供的原始 HTML 中，有两个 select 元素的 id 都为 question1。HTML 元素的 id 必须是唯一的。在上面的完整示例中，我将第二个 select 的 id 改为 question2，并修改了 JavaScript 逻辑，使其能为所有 select 元素添加事件监听，以实现更通用的解决方案。

总结

本教程详细阐述了如何在 Materialize 折叠面板中，根据下拉菜单的选择动态修改头部文本颜色。核心在于理解 CSS 特异性原理，并通过 jQuery 的 DOM 遍历方法（如 closest(), siblings(), find()）精准定位到实际承载文本的子元素。通过这种方式，我们不仅解决了当前问题，也掌握了处理类似前端交互和样式覆盖冲突的通用方法。在实际开发中，始终建议使用最精确的选择器来避免不必要的副作用，确保代码的可维护性和健壮性。

以上就是Materialize 折叠面板头部颜色动态修改：基于下拉选择的实现的详细内容，更多请关注php中文网其它相关文章！