基于Materialize框架：点击按钮修改指定可折叠列表（collapsible-ul）头部与内容区域颜色的实现方案

嘿，别慌！作为前端新手，这种DOM操作需求其实没那么难，我给你准备了两种实现方式，你可以根据自己的习惯选~

方式一：原生JavaScript实现 #

这种方式不需要引入额外库，直接用浏览器自带的API就能搞定：

我们需要等页面DOM加载完成后，给两个按钮绑定点击事件，触发时找到目标元素并修改样式。

// 等待页面所有DOM元素加载完成后执行代码
document.addEventListener('DOMContentLoaded', function() {
    // 获取两个按钮元素
    const headerBtn = document.getElementById('collapsible-header-green');
    const bodyBtn = document.getElementById('collapsible-body-green');

    // 第一个按钮点击逻辑：修改id为2的ul下所有头部的文字颜色为绿色
    headerBtn.addEventListener('click', function() {
        // 精准选择目标元素：id为2的ul下的所有.collapsible-header
        const targetHeaders = document.querySelectorAll('#2 .collapsible-header');
        // 遍历每个头部元素，设置颜色
        targetHeaders.forEach(header => {
            header.style.color = 'green';
        });
    });

    // 第二个按钮点击逻辑：修改id为2的ul下所有内容区的文字颜色为黑色
    bodyBtn.addEventListener('click', function() {
        // 精准选择目标元素：id为2的ul下的所有.collapsible-body
        const targetBodies = document.querySelectorAll('#2 .collapsible-body');
        // 遍历每个内容区元素，设置颜色
        targetBodies.forEach(body => {
            body.style.color = 'black';
        });
    });
});

方式二：jQuery实现（更简洁） #

如果你已经引入了jQuery库，代码会更简短——jQuery的选择器和封装方法能帮我们省去不少重复代码：

首先确保页面中已引入jQuery（比如在<head>里添加<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>，也可以用本地文件），然后写以下代码：

// 等待DOM加载完成
$(document).ready(function() {
    // 绑定第一个按钮的点击事件
    $('#collapsible-header-green').click(function() {
        // 直接选择目标元素并修改颜色
        $('#2 .collapsible-header').css('color', 'green');
    });

    // 绑定第二个按钮的点击事件
    $('#collapsible-body-green').click(function() {
        // 直接选择目标元素并修改颜色
        $('#2 .collapsible-body').css('color', 'black');
    });
});

小提醒 #

• 你给第二个ul的id是2，虽然HTML允许数字开头的id，但建议改成更语义化的名字（比如collapsible-list-2），避免后续可能出现的兼容问题~
• 如果需要修改背景色而非文字颜色，原生JS里把style.color换成style.backgroundColor，jQuery里把css('color', ...)换成css('background-color', ...)就可以啦。

内容的提问来源于stack exchange，提问作者Idraf Jabas