Estoy mostrando el submenú en Hover en Tailwind CSS,
¿Cómo puedo lograr exactamente la misma funcionalidad haciendo un evento onclick en lugar de pasar el mouse?
CÓDIGO:
<div class="group"> <span class="font-bold text-gray-700"> Admission</span> <div class=" hidden group-hover:block bg-white w-auto"> <div class="p-3 hover:bg-gray-200 "> Admission Process </div> <div class="p-3 hover:bg-gray-200""> option 1 </div> <div class="p-3 hover:bg-gray-200""> option 2 </div> </div> </div>¿Hay alguna manera de hacerlo usando solo tailwind css o js?
Puede consultar su menú desplegable con JavaScript y luego agregar un oyente para click el evento.
const dropdownButton = document.querySelector("#dropdown"); const dropdownList = document.querySelector("#dropdown + div.hidden"); dropdownButton.addEventListener("click", () => { dropdownList.classList.toggle("hidden"); }); <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/> <div class="group"> <span class="font-bold text-gray-700" id="dropdown">Admission</span> <div class=" hidden group-hover:block bg-white w-auto"> <div class="p-3 hover:bg-gray-200 "> Admission Process </div> <div class="p-3 hover:bg-gray-200"> option 1 </div> <div class="p-3 hover:bg-gray-200"> option 2 </div> </div> </div> Si desea tener un código para muchos menús desplegables, puede reemplazar la identificación del dropdown con la clase css, así (supongo que la estructura para cada menú desplegable será la misma):
<div class="group dropdown"> <span class="font-bold text-gray-700">Admission</span> <div class=" hidden group-hover:block bg-white w-auto"> <div class="p-3 hover:bg-gray-200 "> Admission Process </div> <div class="p-3 hover:bg-gray-200"> option 1 </div> <div class="p-3 hover:bg-gray-200"> option 2 </div> </div> </div>Y luego consulta y repite cada menú desplegable para agregar detectores de eventos:
const dropdowns = document.querySelectorAll(".dropdown"); dropdowns.forEach(dropdown => { dropdown.querySelector('span').addEventListener("click", () => { dropdown.querySelector('span + div').classList.toggle('hidden'); }); });Primera opción: usar el atributo data-dropdown-toggle
Si desea mostrar un menú desplegable al hacer clic en un elemento, asegúrese de agregar el atributo de datos data-dropdown-toggle="dropdownId" al elemento que alternará el menú desplegable.
Consulte el ejemplo: https://flowbite.com/docs/components/dropdowns/
2da Opción: Usar la opción @click para ocultar y mostrar
Verifique el ejemplo: https://bbbootstrap.com/snippets/tailwind-css-dropdown-menu-85681515