Выпадающее меню внутри боковой панели с использованием Tailwind CSS

Question

Я изучаю Tailwind CSS, поскольку он кажется более продвинутым, чем Bootstrap.

У меня есть этот шаблон html с боковой панелью. Я бы хотел, чтобы когда пользователи нажимали каждую часть- {n}, показывались внутренние части контента.

Примечание: в моем html части называются Capítulos (главы на испанском sh).

Другими словами, я хотел бы воспроизвести это:

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, с другой стороны, "просто" CSS framework без JS.

Также, в отличие от Bootstrap (или Bulma, или любой другой подобной структуры), не содержит никаких компонентов, таких как кнопки, входы и т. Д. c. Так что готового компонента "развал" тоже нет. Вместо этого он используется только для стилизации с нуля, как и с обычным CSS.

В отличие от многих других CSS фреймворков, Tailwind не включает в себя какие-либо классы компонентов, такие как form-input, btn, card или navbar.

Tailwind - это CSS фреймворк для реализации нестандартных дизайнов, и даже такой простой компонент, как кнопка, может выглядеть совершенно по-разному на разных сайтах, поэтому вы можете создавать самоуверенные стили компонентов. d, в конечном итоге, желание переопределить в любом случае только усложнит процесс разработки.

Источник: https://tailwindcss.com/components

Сворачивающееся меню, которое вы пытаетесь достичь для работы требуется некоторый скрипт (JS). Поскольку я этого не знаю. Вы используете jquery или какой-то JS фреймворк, я не могу дать вам готовый пример. Но на самом деле это не имеет ничего общего с самим попутным ветром. Он просто скрывает / отображает какой-то элемент после щелчка по другому элементу. Это logi c, которого можно достичь с помощью любого JS фреймворка или простого JS, в зависимости от того, что вам нужно.

Если вы используете, например, Vue framework, который отлично работает с Tailwind, то вы можете использовать условный рендеринг (https://vuejs.org/v2/guide/conditional.html), но, как я уже сказал, он не имеет ничего общего с самим попутным ветром, поэтому нет смысла приводить Vue примеры в этом вопросе, связанном с попутным ветром.