Materialize CSS：如何根据网格断点控制手风琴面板展开？

嘿，我来帮你梳理下这个问题～

一、Materialize没有内置的断点专属激活类 #

Materialize本身并没有内置类似active-lg这种针对特定断点的激活类，默认的active类是全局生效的，不会根据屏幕尺寸自动切换。不过我们可以通过CSS或者JavaScript两种方式来实现你想要的效果。

二、用CSS媒体查询实现断点依赖的面板展开 #

如果你只需要简单的“特定断点下自动展开面板”，用CSS媒体查询是最直接的方案，不需要额外的JS逻辑。

首先要明确Materialize官方的断点尺寸：

• S断点：≥600px
• M断点：≥992px
• L断点：≥1200px
• XL断点：≥1920px

接下来可以针对目标断点写媒体查询，强制面板在对应尺寸下展开：

/* 示例：在L断点及以上屏幕自动展开面板 */
@media only screen and (min-width: 1200px) {
  /* 让面板内容区域显示（Materialize默认折叠时是display:none） */
  .collapsible-body.active-lg {
    display: block;
  }
  /* 可选：同步切换面板标题的箭头图标状态（和active类的默认样式一致） */
  .collapsible-header.active-lg i {
    transform: rotate(180deg);
  }
}

使用的时候，给你的面板内容（.collapsible-body）加上active-lg类，这样当屏幕宽度达到L断点时，面板就会自动展开，小屏幕下则保持默认的折叠状态。

三、用JavaScript获取当前断点并动态控制 #

如果需要更灵活的逻辑（比如根据断点切换多个面板的状态，或者结合其他交互），可以用JS监听窗口尺寸，判断当前所处的Materialize断点，再动态添加/移除active类。

下面是一个实用的实现示例：

// 先定义和Materialize官方一致的断点像素值
const breakpoints = {
  xs: 0,
  s: 600,
  m: 992,
  l: 1200,
  xl: 1920
};

// 获取当前断点的函数
function getCurrentBreakpoint() {
  const width = window.innerWidth;
  if (width >= breakpoints.xl) return 'xl';
  if (width >= breakpoints.l) return 'l';
  if (width >= breakpoints.m) return 'm';
  if (width >= breakpoints.s) return 's';
  return 'xs';
}

// 动态更新面板状态的函数
function updatePanelActiveState() {
  const targetPanel = document.querySelector('.your-collapsible'); // 替换成你的面板选择器
  const currentBP = getCurrentBreakpoint();
  
  // 自定义逻辑：比如在M及以上断点激活面板，其他断点折叠
  if (currentBP === 'm' || currentBP === 'l' || currentBP === 'xl') {
    targetPanel.classList.add('active');
  } else {
    targetPanel.classList.remove('active');
  }
}

// 页面加载时初始化一次
updatePanelActiveState();
// 监听窗口大小变化，实时更新
window.addEventListener('resize', updatePanelActiveState);

这个方法的好处是可以完全自定义断点对应的行为，比如不同断点下切换不同面板的激活状态，或者结合其他组件的交互逻辑。

内容的提问来源于stack exchange，提问作者bo-oz