如何实现Shadcn Accordion桌面端默认展开、移动端默认关闭？

要实现这个需求，你可以结合React状态管理和窗口尺寸监听，配合Tailwind的断点规则来控制Accordion的展开状态，具体步骤如下：

1. 引入必要的React Hooks #

首先在组件里导入useState和useEffect，用来管理展开状态和监听窗口变化：

import { useState, useEffect } from 'react';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';

2. 定义状态和窗口监听逻辑 #

通过状态控制Accordion的展开值，同时监听窗口尺寸变化，根据Tailwind的默认md断点（768px）切换状态：

export default function YourComponent() {
  // 初始化状态：桌面端默认展开，移动端默认关闭
  const [expandedValue, setExpandedValue] = useState(null);

  useEffect(() => {
    // 判断屏幕尺寸并更新状态
    const checkScreenSize = () => {
      const isDesktop = window.innerWidth >= 768;
      setExpandedValue(isDesktop ? 'item-1' : null);
    };

    // 初始加载时执行一次
    checkScreenSize();

    // 监听窗口 resize 事件
    window.addEventListener('resize', checkScreenSize);

    // 组件卸载时清理监听
    return () => window.removeEventListener('resize', checkScreenSize);
  }, []);

  return (
    <Accordion type="single" collapsible value={expandedValue} onValueChange={setExpandedValue}>
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

3. 关键说明 #

• 用value属性手动控制Accordion的展开状态，同时保留onValueChange让用户可以手动切换展开/关闭
• 基于Tailwind的md断点（768px）判断设备类型，窗口尺寸变化时自动适配状态
• 初始加载时会自动识别当前屏幕尺寸，设置对应的初始展开状态

内容的提问来源于stack exchange，提问作者Yasin Shah