使用折叠组件，通过 data 属性选项根据子元素的折叠和展开状态显示隐藏信息
折叠组件是垂直折叠的标题和正文元素的集合，可用于显示和隐藏基于 Tailwind CSS 实用程序类和 SatriUI 中的 JavaScript 的信息。
一个常见的用例是网站或页面的“常见问题”部分，此时您可以显示每个子元素的问题和答案。
有两个主要选项可用于初始化折叠组件：
- data-accordion="collapse"仅显示一个活动的子元素
- data-accordion="open"保持多个元素打开
不要忘记将 data 属性设置为 header 元素，其中值是折叠面板 body 元素的 id 或 class，以及用于标记折叠面板的活动或非活动状态的属性。data-accordion-target="{selector}" aria-expanded="{true|false}"
默认折叠面板
源代码预览
<div id="accordion-collapse" data-accordion="collapse">
<h2 id="accordion-collapse-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-collapse-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
<span>SatriUI是什么?</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-collapse-body-1" class="hidden" aria-labelledby="accordion-collapse-heading-1">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-2 text-gray-500 dark:text-gray-400">SatriUI是一款基于Tailwind CSS开发的、完全开源的UI组件库</p>
</div>
</div>
<h2 id="accordion-collapse-heading-2">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-collapse-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2">
<span>SatriUI和TailWind CSS之间有什么区别？</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-collapse-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
<div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">主要区别在于SatriUI的核心组件在MIT许可下是开源的，而Tailwind CSS是付费产品。</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">另一个区别是SatriUI可以是全局风格统一，且更偏向现代化，而Tailwind CSS只是优化了CSS的实现方式</p>
</div>
</div>
</div>
始终打开
使用该选项可保持已打开的折叠元素不变。data-accordion="open"
源代码预览
<div id="accordion-open" data-accordion="open">
<h2 id="accordion-collapse-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-collapse-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
<span>SatriUI是什么?</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-collapse-body-1" class="hidden" aria-labelledby="accordion-collapse-heading-1">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-2 text-gray-500 dark:text-gray-400">SatriUI是一款基于Tailwind CSS开发的、完全开源的UI组件库</p>
</div>
</div>
<h2 id="accordion-collapse-heading-3">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-collapse-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2">
<span>SatriUI和TailWind CSS之间有什么区别？</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-collapse-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
<div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">主要区别在于SatriUI的核心组件在MIT许可下是开源的，而Tailwind CSS是付费产品。</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">另一个区别是SatriUI可以是全局风格统一，且更偏向现代化，而Tailwind CSS只是优化了CSS的实现方式</p>
</div>
</div>
</div>
颜色选项
每当通过应用任意数量的类来扩展折叠面板时，使用 and 来设置 header 元素的活动和非活动类，但请确保用空格分隔它们。如果 data 属性未设置或为空，它将应用默认类。data-active-classes data-inactive-classes
下面是一个应用蓝色而不是灰色的示例：
源代码预览
<div id="accordion-color" data-accordion="collapse" data-active-classes="bg-blue-100 dark:bg-gray-800 text-blue-600 dark:text-white">
<h2 id="accordion-collapse-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-collapse-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
<span>SatriUI是什么?</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-collapse-body-1" class="hidden" aria-labelledby="accordion-collapse-heading-1">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-2 text-gray-500 dark:text-gray-400">SatriUI是一款基于Tailwind CSS开发的、完全开源的UI组件库</p>
</div>
</div>
<h2 id="accordion-collapse-heading-2">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-collapse-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2">
<span>SatriUI和TailWind CSS之间有什么区别？</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-collapse-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
<div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">主要区别在于SatriUI的核心组件在MIT许可下是开源的，而Tailwind CSS是付费产品。</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">另一个区别是SatriUI可以是全局风格统一，且更偏向现代化，而Tailwind CSS只是优化了CSS的实现方式</p>
</div>
</div>
</div>
FLUSH手风琴
使用此示例可从折叠组件中删除背景颜色和圆角边框。
源代码预览
<div id="accordion-flush" data-accordion="collapse" data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white" data-inactive-classes="text-gray-500 dark:text-gray-400">
<h2 id="accordion-flush-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-flush-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
<span>SatriUI是什么?</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-flush-body-1" class="hidden" aria-labelledby="accordion-collapse-heading-1">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-2 text-gray-500 dark:text-gray-400">SatriUI是一款基于Tailwind CSS开发的、完全开源的UI组件库</p>
</div>
</div>
<h2 id="accordion-flush-heading-2">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-flush-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2">
<span>SatriUI和TailWind CSS之间有什么区别？</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-flush-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
<div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">主要区别在于SatriUI的核心组件在MIT许可下是开源的，而Tailwind CSS是付费产品。</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">另一个区别是SatriUI可以是全局风格统一，且更偏向现代化，而Tailwind CSS只是优化了CSS的实现方式</p>
</div>
</div>
</div>
箭头样式
使用 data 属性可以选择性地将元素设置为在展开折叠式元素时旋转 180 度。如果未设置 data 属性，则不会旋转。data-accordion-icon
源代码预览
<div id="accordion-arrow-icon" data-accordion="open">
<h2 id="accordion-arrow-icon-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-900 bg-gray-100 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-arrow-icon-body-1" aria-expanded="true" aria-controls="accordion-arrow-icon-body-1">
<span>无箭头的手风琴</span>
</button>
</h2>
<div id="accordion-arrow-icon-body-1" aria-labelledby="accordion-arrow-icon-heading-1">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-2 text-gray-500 dark:text-gray-400">无箭头的手风琴的内容</p>
</div>
</div>
<h2 id="accordion-arrow-icon-heading-2">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-arrow-icon-body-2" aria-expanded="false" aria-controls="accordion-arrow-icon-body-2">
<span>手风琴与另一个图标</span>
<svg class="w-4 h-4 shrink-0 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7.529 7.988a2.502 2.502 0 0 1 5 .191A2.441 2.441 0 0 1 10 10.582V12m-.01 3.008H10M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
</svg>
</button>
</h2>
<div id="accordion-arrow-icon-body-2" class="hidden" aria-labelledby="accordion-arrow-icon-heading-2">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
<p class="text-gray-500 dark:text-gray-400">手风琴与另一个图标的内容</p>
</div>
</div>
<h2 id="accordion-arrow-icon-heading-3">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-arrow-icon-body-3" aria-expanded="false" aria-controls="accordion-arrow-icon-body-3">
<span>无箭头旋转的手风琴</span>
<svg class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-arrow-icon-body-3" class="hidden" aria-labelledby="accordion-arrow-icon-heading-3">
<div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">无箭头旋转的手风琴的内容</p>
</div>
</div>
</div>
嵌套手风琴
手风琴可以嵌套。支持所有提到的选项。
<iframe width="100%" frameborder="0" height="300px" srcdoc='
<link href="https://cdn.satri.cn/satriui/css/satriui.min.css" rel="stylesheet" /><script src="https://cdn.satri.cn/satriui/js/satriui.min.js"></script>
<div id="accordion-nested-parent" data-accordion="collapse">
<h2 id="accordion-collapse-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-collapse-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
<span>SatriUI是什么？</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-collapse-body-1" class="hidden" aria-labelledby="accordion-collapse-heading-1">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-4 text-gray-500 dark:text-gray-400">SatriUI是……</p>
<!-- Nested accordion -->
<div id="accordion-nested-collapse" data-accordion="collapse">
<h2 id="accordion-nested-collapse-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 rounded-t-xl font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-nested-collapse-body-1" aria-expanded="false" aria-controls="accordion-nested-collapse-body-1">
<span>开源</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-nested-collapse-body-1" class="hidden" aria-labelledby="accordion-nested-collapse-heading-1">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
<p class="text-gray-500 dark:text-gray-400">开源的内容</p>
</div>
</div>
<h2 id="accordion-nested-collapse-heading-2">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-nested-collapse-body-2" aria-expanded="false" aria-controls="accordion-nested-collapse-body-2">
<span>架构</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-nested-collapse-body-2" class="hidden" aria-labelledby="accordion-nested-collapse-heading-2">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
<p class="text-gray-500 dark:text-gray-400">架构的内容</p>
</div>
</div>
<h2 id="accordion-nested-collapse-heading-3">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-nested-collapse-body-3" aria-expanded="false" aria-controls="accordion-nested-collapse-body-3">
<span>我可以同时使用Tailwind CSS和SatriUI吗？</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-nested-collapse-body-3" class="hidden" aria-labelledby="accordion-nested-collapse-heading-3">
<div class="p-5 border border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">当然可以！</p>
</div>
</div>
</div>
<!-- End: Nested accordion -->
</div>
</div>
<h2 id="accordion-collapse-heading-2">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-collapse-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2">
<span>SatriUI免费吗</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-collapse-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
<div class="p-5 border border-gray-200 dark:border-gray-700">
<p class="text-gray-500 dark:text-gray-400">是的！</p>
</div>
</div>
</div>
'></iframe>
源代码预览
<div id="accordion-nested-parent" data-accordion="collapse">
<h2 id="accordion-collapse-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-collapse-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
<span>SatriUI是什么？</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-collapse-body-1" class="hidden" aria-labelledby="accordion-collapse-heading-1">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-4 text-gray-500 dark:text-gray-400">SatriUI是……</p>
<!-- Nested accordion -->
<div id="accordion-nested-collapse" data-accordion="collapse">
<h2 id="accordion-nested-collapse-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 rounded-t-xl font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-nested-collapse-body-1" aria-expanded="false" aria-controls="accordion-nested-collapse-body-1">
<span>开源</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-nested-collapse-body-1" class="hidden" aria-labelledby="accordion-nested-collapse-heading-1">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
<p class="text-gray-500 dark:text-gray-400">开源的内容</p>
</div>
</div>
<h2 id="accordion-nested-collapse-heading-2">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-nested-collapse-body-2" aria-expanded="false" aria-controls="accordion-nested-collapse-body-2">
<span>架构</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-nested-collapse-body-2" class="hidden" aria-labelledby="accordion-nested-collapse-heading-2">
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
<p class="text-gray-500 dark:text-gray-400">架构的内容</p>
</div>
</div>
<h2 id="accordion-nested-collapse-heading-3">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-nested-collapse-body-3" aria-expanded="false" aria-controls="accordion-nested-collapse-body-3">
<span>我可以同时使用Tailwind CSS和SatriUI吗？</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-nested-collapse-body-3" class="hidden" aria-labelledby="accordion-nested-collapse-heading-3">
<div class="p-5 border border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">当然可以！</p>
</div>
</div>
</div>
<!-- End: Nested accordion -->
</div>
</div>
<h2 id="accordion-collapse-heading-2">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-collapse-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2">
<span>SatriUI免费吗</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
</svg>
</button>
</h2>
<div id="accordion-collapse-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
<div class="p-5 border border-gray-200 dark:border-gray-700">
<p class="text-gray-500 dark:text-gray-400">是的！</p>
</div>
</div>
</div>
JavaScript 行为
使用 SatriUI 中的 Accordion 对象，通过直接从 JavaScript 中的对象参数、选项、方法和回调函数创建垂直折叠标题和内容元素的集合。
对象参数
通过传递一组折叠项和一个可选的 options 对象来创建新的 Accordion 对象，以自定义样式并添加回调函数。
| 参数 | 类型 | 必填 | 描述 |
|---|---|---|---|
accordionEl | 元素 | 必填 | 折叠组件的父 HTML 元素。 |
items | 数组 | 必填 | 折叠项对象的数组，包括唯一标识符、标题元素、内容元素和活动状态。 |
options | 对象 | 自选 | 选项的对象，您可以设置这些选项以自定义折叠面板项的样式并设置回调函数。 |
instanceOptions | 对象 | 自选 | 选项对象，允许您为要添加到 Instance Manager 的实例设置自定义 ID，以及是否覆盖现有实例。 |
选项
使用以下选项作为 Accordion 对象的第二个参数，以自定义行为、样式和设置回调函数。
| 选择 | 类型 | 描述 |
|---|---|---|
alwaysOpen | 布尔 | 如果设置为 true，则可以同时打开多个折叠元素。默认情况下，它是 false。 |
activeClasses | 数组 | 设置一组 Tailwind CSS 类名称，以应用于活动的折叠式标题元素。 |
inactiveClasses | 数组 | 应用一组 Tailwind CSS 类名称以应用于非活动折叠式标题元素。 |
onOpen | 功能 | 在打开新的折叠面板项时设置回调函数。 |
onClose | 功能 | 在关闭新的折叠项时设置回调函数。 |
方法
使用 Accordion 对象上的对象方法以编程方式打开、关闭或切换给定折叠项的可见性。
| 方法 | 描述 |
|---|---|
toggle(id) | 使用此功能可根据折叠面板项的当前状态切换折叠项。 |
open(id) | 使用此功能可打开基于 ID 的折叠面板项。 |
close(id) | 使用此功能可根据 ID 关闭折叠项。 |
updateOnOpen(callback) | 使用此方法设置打开折叠项时的回调函数。 |
updateOnClose(callback) | 使用此方法设置折叠面板项关闭时的回调函数。 |
updateOnToggle(callback) | 使用此方法设置在切换折叠项时触发回调函数。 |