如何使用纯粹的tailwindcss构建一个响应式的一折手风琴-DEV365 开发者社区

在Web设计中，手风琴是一种菜单，可显示彼此堆叠的标题列表。单击（或由键盘交互或屏幕读取器触发）时，这些标题将揭示或隐藏相关的内容。

这种设计模式非常适合将长形或复杂的内容分解为可消化的块。它也是移动站点的理想选择，因为它减少了用户必须滚动多少。这种组件通常在网站的常见解答页面上使用。

这使人们可以控制阅读内容以及何时可以增强他们的用户体验。

在本节中，我们将纯粹使用parwindcss构建这些惊人的一折手风琴组件之一。

了解任务

您可能想知道，一部手风琴是什么？这只是您一次可以阅读一个手风琴的内容的内容。

打开（展开）时，另一个会自动折叠。我们将仅使用parwindcss构建它。

与其他所有手风琴一样，它由3个部分组成。

标题
图标
内容

让我们看看这是如何构建的。

代码结构

由于该手风琴由多个相同的折叠组成，因此我们将重点关注一个，然后简单地应对和粘贴，并为其他内容更改内容。

这是我们的代码结构的结构，

<body>
<!-- First Layer-->
    <div>
<!-- Second Layer-->
        <div>
                    <!-- Main Header -->
                        <div></div>
                    <!-- Accordion Container -->
                    <div>
                    <!-- FOld one -->
                        <div></div>

                    <!-- Fold two -->
                        <div></div>

                    <!-- Fold three -->
                        <div></div>
                    <div>
        </div>

    </div>
</body>

如前所述，我们将集中精力一倍，然后相应地修改以适合其他

一倍代码

<!-- Fold One-->
<div class="my-[0.8rem] overflow-hidden border-l-[0.4rem] border-orange-400 bg-orange-200/20 shadow-md rounded">
    <input type="radio" name="faq" id="faq_1" class="sr-only peer">
    <label for="faq_1" class="peer-checked:[&>section]:font-semibold peer-checked:[&>section]:bg-orange-400 peer-checked:[&>section]:text-white peer-checked:[&>section>div>h2]:rotate-45 peer-checked:[&>div]:max-h-screen peer-checked:[&>div]:p-[1rem]">
                        <!-- Header-->
        <section class="p-[0.7em] cursor-pointer flex items-center bg-transparent gap-3">
                        <!-- Icon -->
         <div class="text-4xl flex items-center justify-center">
         <h2 class="block rotate-0 transition-all duration-200">&plus;</h2>
         </div>
       <h2 class="w-[80%] text-xs">Facts and Knowledge about COVID-19</h2>

       </section>
                        <!-- Accordion Content -->
      <div class="max-h-0 mx-7 p-[0.001rem] [&>p]:mb-3 transition-all duration-[1s] text-[0.8rem]">
         <p>Social distance, quarantine and insolation</p>
         <p>Hand hygiene, cough etiquete, cleaning and laundry</p>
         <p>When children have acute respiratory tract infections</p>
         <p>Risk groups and their relatives</p>
      </div>
   </label>
 </div>

让我们理解我们刚刚编写的代码。我们将首先讨论不同的部分，然后我们将讨论如何使此功能。

标题

主要是我们的标题仅包含一个文本，其宽度为w- [80％]，占父母容器的80％。重要的是要强调，其母体容器是一个包含标头和图标的Flex容器。

 <h2 class="w-[80%] text-xs">Facts and Knowledge about COVID-19</h2>

图标

在这里，为避免导入或添加SVG文件，我们只使用ASCII值添加+–'并根据手风琴的状态旋转它，并且它只是达到了我们任务的目的。

                        <!-- Icon -->
<div class="text-4xl flex items-center justify-center">
   <h2 class="block rotate-0 transition-all duration-200">&plus;</h2>
</div>

标题和图标都在同一容器（同一部分）中找到。因此，从我们的代码中，我们将它们分组在一起。

                        <!-- Header-->
<section class="p-[0.7em] cursor-pointer flex items-center bg-transparent gap-3">
                        <!-- Icon -->
   <div class="text-4xl flex items-center justify-center">
    <h2 class="block rotate-0 transition-all duration-200">&plus;</h2>
   </div>

   <h2 class="w-[80%] text-xs">Facts and Knowledge about COVID-19</h2>

</section>

我们在这里没有使用太多造型，只是给了容器一个p-[0.7rem]的填充物，BG-transparent的背景色，并且由于它是一个Flex容器，我们给了它的内容差距为gap-3

手风琴内容

                        <!-- Accordion Content -->
<div class="max-h-0 mx-7 p-[0.001rem] [&>p]:mb-3 transition-all duration-[1s] text-[0.8rem]">
       <p>Social distance, quarantine and insolation</p>
       <p>Hand hygiene, cough etiquete, cleaning and laundry</p>
       <p>When children have acute respiratory tract infections</p>
       <p>Risk groups and their relatives</p>
</div>

我们在这里没有做太多的样式，我们给了它最大的max-h-0，p-[0.001rem]的填充和mx-7

的边距内线

请注意此MAX-H-0和P- [0.001REM]，因为我们将很快需要此特定属性

这基本上是手风琴的结构。

现在！我们如何使其功能化？

我们在两件事的帮助下实现了这一目标，一个输入复选框和标签。

我们将所有手风琴纳入标签中，并使用无线电输入状态来改变其他属性的特征。

<input type="radio" name="faq" id="faq_1" class="sr-only peer">
<label for="faq_1" class="peer-checked:[&>section]:font-semibold peer-checked:[&>section]:bg-orange-400 peer-checked:[&>section]:text-white peer-checked:[&>section>div>h2]:rotate-45 peer-checked:[&>div]:max-h-screen peer-checked:[&>div]:p-[1rem]">

对于第一次手风琴，我们给了它一个 name =âfaq_1“ 和 id =âfaq_1”。 sr-sr-fly 和对等

同伴类在HTML 中为网站添加了功能。几乎就像JS使用输入无线电一样工作。这取决于将输入的值设置为。

虽然仅屏幕阅读器元素（仅SR-sr） 在视觉上隐藏一个元素而不将其隐藏在屏幕阅读器中：

我相信这两个课程现在更有意义。

我们使用对等检查来改变标签组件中的不同属性。例如，peer-checked:[&>section]:text-white peer-checked:[&>section]:bg-orange-500，仅表示，如果检查了单个按钮，请将部分部分的文本颜色更改为文本白色，也将背景色更改为bg-orange-500

同样，我们还使用peer-checked:[&>section>div>h2]:rotate-45，说，如果检查了单选按钮，请旋转我们的“+” 图标45DEG，当时给我们“ x” 手风琴是展开的。

您还记得我们的Max-H-0吗？我们使用上面的相同逻辑来更改其值peer-checked:[&>div]:max-h-screen，在检查中，将max-h-0更改为max-h-screen

其他所有想法都适合其他所有想法。

值得注意的是，您无法更改最初定义的属性。例如，如果部分部分没有bg-white，则可以挑战本部分部分的背景色。

如果未定义max-h-0或被命名为min-h-0或h-0,的其他内容，则同行检查不起作用。

基本上，您可以如何使用tailwindcss构建手风琴。

当然，这只是3条手风琴之一，这就是整个代码的样子，

<div> <div class="my-[0.8rem] overflow-hidden border-l-[0.4rem] border-orange-400 bg-orange-200/20 shadow-md rounded"> <input type="radio" name="faq" id="faq_1" class="sr-only peer"> <label for="faq_1" class="peer-checked:[&>section]:font-semibold peer-checked:[&>section]:bg-orange-400 peer-checked:[&>section]:text-white peer-checked:[&>section>div>h2]:rotate-45 peer-checked:[&>div]:max-h-screen peer-checked:[&>div]:p-[1rem]"> <section class="p-[0.7em] cursor-pointer flex items-center bg-transparent gap-3"> <div class="text-4xl flex items-center justify-center"> <h2 class="block rotate-0 transition-all duration-200">+</h2> </div> <h2 class="w-[80%] text-xs">Facts and Knowledge about COVID-19</h2> </section> <div class="max-h-0 mx-7 p-[0.001rem] [&>p]:mb-3 transition-all duration-[1s] text-[0.8rem]"> <p>Social distance, quarantine and insolation</p> <p>Hand hygiene, cough etiquete, cleaning and laundry</p> <p>When children have acute respiratory tract infections</p> <p>Risk groups and their relatives</p> </div> </label> </div> <div class="my-[0.8rem] overflow-hidden border-l-[0.4rem] border-violet-400 bg-violet-200/20 rounded shadow-md"> <input type="radio" name="faq" id="faq_2" class="sr-only peer" checked> <label for="faq_2" class="peer-checked:[&>section]:font-semibold peer-checked:[&>section]:bg-violet-400 peer-checked:[&>section]:text-white peer-checked:[&>section>div>h2]:rotate-45 peer-checked:[&>div]:max-h-screen peer-checked:[&>div]:p-[1rem]"> <section class="p-[0.7em] cursor-pointer bg-transparent flex items-center gap-3"> <div class="text-4xl flex items-center justify-center"> <h2 class="rotate-0 transition-all duration-200">+</h2> </div> <h2 class="w-[80%] text-xs">For the public</h2> </section> <div class="max-h-0 mx-6 p-[0.001rem] [&>p]:mb-3 transition-all duration-[1s] text-[0.8rem]"> <p>Social distance, quarantine and insolation</p> <p>Hand hygiene, cough etiquete, cleaning and laundry</p> <p>When children have acute respiratory tract infections</p> <p>Risk groups and their relatives</p> </div> </label> </div> <div class="my-[0.8rem] overflow-hidden border-l-[0.4rem] border-rose-400 bg-rose-300/20 shadow-md rounded"> <input type="radio" name="faq" id="faq_3" class="sr-only peer"> <label for="faq_3" class="peer-checked:[&>section]:font-semibold peer-checked:[&>section]:bg-rose-400 peer-checked:[&>section]:text-white peer-checked:[&>section>div>h2]:rotate-45 peer-checked:[&>div]:max-h-screen peer-checked:[&>div]:p-[1rem]"> <section class="p-[0.7em] cursor-pointer flex items-center gap-3"> <div class="text-4xl flex items-center justify-center"> <h2 class="block rotate-0 transition-all duration-200">+</h2> </div> <h2 class="w-[80%] text-xs">Facts and Knowledge about COVID-19</h2> </section> <div class="max-h-0 mx-7 p-[0.001rem] [&>p]:mb-3 transition-all duration-[1s] text-[0.8rem]"> <p>Social distance, quarantine and insolation</p> <p>Hand hygiene, cough etiquete, cleaning and laundry</p> <p>When children have acute respiratory tract infections</p> <p>Risk groups and their relatives</p> </div> </label> </div> </div>

显然，我们在不同的不同层和身体的不同层中添加了一些样式，以实现最终产品，因此

<body class="bg-slate-50 flex items-center justify-center min-h-screen">  <div class="w-[22rem] p-5 bg-white rounded-md shadow-md">  <div>  <div class="font-bold"> <h2>Coronavirus - Facts, advice and measures</h2> </div>  <div></div> </div> </div> </body>

这几乎就是这一切。

结论

我们刚刚构建了一个功能齐全的一倍手风琴组件，在此过程中，我们也对parwindcss有了更多的了解。

许多雇主将需要将这样的组件添加到其网站上，并且可以肯定地知道直接从HTML文档创建它是多么简单。

您可以在Codepen上进行实时预览，也可以在GitHub
上找到代码
如果您能够完成本教程，请不要与我分享，我很高兴看到任何其他组件。

如果您有任何担忧或建议，请不要犹豫！ ð

见ya！ ð