Headless UI 中的 Group Disclosures (Accordian)答案

【问题标题】：Group Disclosures (Accordian) from Headless UIHeadless UI 中的 Group Disclosures (Accordian)
【发布时间】：2022-08-17 00:08:15
【问题描述】：

我刚刚开始使用 Headless UI。我正在尝试使用 Headless UI 中的 Disclosure 组件来呈现我的工作体验。基本上，我需要将动态呈现的“n”个披露，并且每当打开一个披露时，其他披露应该关闭。

我能够动态呈现披露，并且它们都有各自的状态。（打开/关闭一项披露不会影响另一项披露）。我想做的只是一次只公开一个披露。打开另一个披露应该关闭所有剩余的披露。我已经浏览了他们的docs，但找不到一起管理多个披露状态的方法。

这是我的代码：

    import React, { useContext } from \"react\";
    import { GlobalContext } from \"../data/GlobalContext\";
    import { Tab, Disclosure } from \"@headlessui/react\";
    import ReactMarkdown from \"react-markdown\";

    const Experience = () => {
      const { data } = useContext(GlobalContext);
      const expData = data.pageContent.find(
        (content) => content.__component === \"page-content.experience-page-content\"
      );

      return (
        <div className=\"container h-screen\">
          <div className=\"flex h-full flex-col items-center justify-center\">
            <h3 className=\"\">{expData.pageTitle}</h3>
            <div className=\"flex min-h-[600px] flex-col\">

              {expData.jobs.map((job, i) => (
                <Disclosure key={job.companyName} defaultOpen={i === 0}>
                  <Disclosure.Button
                    key={job.companyName + \"_tab\"}
                    className=\"px-4 py-3 dark:text-dark-primary\"
                  >
                    {job.companyName}
                  </Disclosure.Button>
                  <Disclosure.Panel key={job.companyName + \"_panel\"}>
                    <p className=\"\">
                      <span className=\"\">{job.designation}</span>
                      <span className=\"\">{\" @ \"}</span>
                      <span className=\"\">{job.companyName}</span>
                    </p>
                    <p className=\"\">{job.range}</p>
                    <ReactMarkdown className=\"\">
                      {job.workDescription}
                    </ReactMarkdown>
                  </Disclosure.Panel>
                </Disclosure>
              ))}

            </div>
          </div>
        </div>
      );
    };

    export default Experience;

如果有人可以帮助我，那将非常有帮助。谢谢。

你好，我也面临同样的问题。你找到方法了吗？
@Rupali 抱歉耽搁了，我找到了解决方法...
@Rupali 你解决了吗？
感谢您的留言。是的，我还找到了解决方法。我基本上遵循了这个线程：github.com/tailwindlabs/headlessui/discussions/475（为其他人粘贴链接；））

标签： reactjs tailwind-css tailwind-ui headless-ui

【解决方案1】：

<template>
  <div class="mx-auto w-full max-w-md space-y-3 rounded-2xl bg-white p-2">
    <Disclosure v-for="(i, idx) in 3" :key="i" v-slot="{ open, close }">
      <DisclosureButton
        :ref="el => (disclosure[idx] = close)"
        class="flex w-full justify-between rounded-lg bg-purple-100 px-4 py-2 text-left text-sm font-medium text-purple-900 hover:bg-purple-200 focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
        @click="hideOther(idx)"
      >
        <span> What is your refund policy? {{ open }} </span>
      </DisclosureButton>

      <DisclosurePanel class="px-4 pt-4 pb-2 text-sm text-gray-500">
        If you're unhappy with your purchase for any reason, email us within 90 days and we'll
        refund you in full, no questions asked.
      </DisclosurePanel>
    </Disclosure>
  </div>
</template>

<script setup>
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'

const disclosure = ref([])

const hideOther = id => {
  disclosure.value.filter((d, i) => i !== id).forEach(c => c())
}
</script>

这是我在 Vue 中是如何做到的。

【讨论】：