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

Question

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

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

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

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

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

您所指的

Bootstrap 是 CSS 框架，带有额外的 JavaScript（使用 jQuery）脚本，用于模式、下拉和折叠（您正在尝试现在就开始）。

Tailwind 是没有任何 JS 的 "just" CSS 框架。

与 Bootstrap（或 Bulma 或任何其他类似框架）相反的是不包含任何组件，如按钮、输入等。因此也没有现成的 "collapse" 组件。相反，它仅用于从头开始设计样式，就像普通的 CSS.

Unlike many other CSS frameworks, Tailwind doesn't include any component classes like form-input, btn, card, or navbar.

Tailwind is a CSS framework for implementing custom designs, and even a component as simple as a button can look completely different from one site to another, so providing opinionated component styles that you'd end up wanting to override anyways would only make the development experience more frustrating.

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

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

如果您使用的是例如与 Tailwind 配合使用的 Vue 框架，那么您可以使用条件渲染 (https://vuejs.org/v2/guide/conditional.html)，但正如我所说，它与 Tailwind 本身无关，因此没有意义在这个 Tailwind 相关问题中给出 Vue 示例。

Answer 2

如果你想用 tailwind 实现这个，最简单的方法是使用 alpine js 来切换。

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

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

Dropdown menu inside sidebar using Tailwind CSS

html

css

tailwind-css