使用 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