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

Question

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

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

注意：在我的 html 中，零件被称为 Capítulos（西班牙语章节）。

换句话说，我想复制这个：

代码笔：

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

您所指的引导程序是 CSS 框架，带有额外的 JavaScript（使用 jQuery）脚本，用于模式、下拉和折叠（您现在正试图获得）。

另一方面，Tailwind 是“只是”没有任何 JS 的 CSS 框架。

同样与 Bootstrap（或 Bulma 或任何其他类似框架）相反的是不包含任何组件，如按钮、输入等。因此也没有准备好使用的“折叠”组件。 相反，它仅用于从头开始造型，就像普通的 CSS 一样。

与许多其他 CSS 框架不同，Tailwind 不包含任何组件类，如表单输入、btn、卡片或导航栏。

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

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

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

例如，如果您使用的 Vue 框架可以很好地与 Tailwind 配合使用，那么您可以使用条件渲染（ https://v2.vuejs.org/v2/guide/conditional.html ）但就像我说的那样，它与Tailwind 本身，因此没有必要在这个 Tailwind 相关问题中给出 Vue 示例。

Answer 2

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

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