使用尾风CSS的侧边栏中的下拉菜单

Question

我正在学习TailwindCSS，因为它似乎比Bootstrap更先进。

我有一个html模板，它有一个边栏。我希望当用户单击每个部分-{n}时，它会显示内容的内部部分。

注:在我的html中，部分名为Chapters(西班牙语章节)。

换句话说，我想复制这一点：

​

​

Codepen:

https://codepen.io/ogonzales/pen/WNQMyXJ

<div class="w-full md:w-1/5 bg-gray-900 md:bg-gray-900 px-2 text-center fixed bottom-0 md:pt-8 md:top-0 md:left-0 h-16 md:h-screen md:border-r-4 md:border-gray-600">
    <div class="md:relative mx-auto lg:float-right lg:px-6">
     <ul class="list-reset flex flex-row md:flex-col text-center md:text-left">
        <li class="mr-3 flex-1">
           <a  href="/" class="block py-1 md:py-3 pl-1 align-middle text-gray-800 no-underline border-b-2 border-gray-800 md:border-gray-900">&emsp;&emsp;<img src="{% static 'images/logo.png' %}" width="100%"
                height="100%"></a>
        </li>  
       </ul>
    </div>
 </div>

Answer 1

引导，您指的是带有额外JavaScript (使用jQuery)脚本的CSS框架，用于modals、下拉列表和折叠(您现在正在尝试获取)。

而“顺风”则是“只是”CSS框架，没有任何JS。

也相对于Bootstrap (或Bulma或任何其他类似的框架)是不包含任何组件，如按钮，输入等。因此，也没有准备使用“折叠”组件。相反，它只用于从头开始的样式设计，就像普通的CSS一样。

与许多其他CSS框架不同的是，

不包括任何组件类，如表单输入、btn、卡片或导航条。

“顺风”是一个用于实现定制设计的CSS框架，即使像按钮这样简单的组件也可能在每个站点之间看起来完全不同，因此提供您最终想要覆盖的固执己见的组件样式只会使开发体验更加令人沮丧。

来源：https://tailwindcss.com/components

正在尝试实现的折叠菜单需要一些脚本(JS)才能工作。因为我不知道您正在使用jquery或某些JS框架，所以我无法给您提供任何使用示例的准备。但实际上它与尾风本身无关。它只是在单击另一个元素后隐藏/显示某个元素。这是任何JS框架或普通JS都可以实现的逻辑，这取决于您需要什么。

如果您使用的是Vue框架，它将非常适合Tailwind，那么您可以使用条件呈现(https://v2.vuejs.org/v2/guide/conditional.html)，但是正如我所说的，它与Tailwind本身没有任何关系，因此在这个与Tailwind相关的问题中提供Vue示例是没有意义的。

Answer 2

如果你想用顺风来实现这一点，最简单的方法就是使用高寒js来切换。

您可以在：https://github.com/alpinejs/alpine上找到更多信息并下载该库。