顺风点击显示数据答案

【问题标题】：Tailwind on click show data顺风点击显示数据
【发布时间】：2021-12-11 14:28:50
【问题描述】：

我通过鼠标悬停在顺风 css 中显示子菜单，

如何通过 onclick 事件而不是悬停来实现完全相同的功能。

代码：

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

有没有办法只使用 tailwind css 或 js？

【问题讨论】：

标签： javascript css tailwind-css

【解决方案1】：

您可以使用 JavaScript 查询下拉列表，然后将侦听器添加到 click 事件。

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>

多个下拉菜单

如果您想为多个下拉菜单设置一个代码，可以将dropdown id 替换为 css 类，如下所示（我假设每个下拉菜单的结构都相同）：

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

然后查询并循环遍历每个下拉列表以添加事件侦听器：

const dropdowns = document.querySelectorAll(".dropdown");

dropdowns.forEach(dropdown => {
  dropdown.querySelector('span').addEventListener("click", () => {
    dropdown.querySelector('span + div').classList.toggle('hidden');
  });
});

【讨论】：

如果有多个菜单怎么办？
检查我的回答中的更新

【解决方案2】：

第一个选项：使用 data-dropdown-toggle 属性

如果您想在单击元素时显示下拉菜单，请确保将 data-dropdown-toggle="dropdownId" 数据属性添加到将切换下拉菜单的元素。

查看示例：https://flowbite.com/docs/components/dropdowns/

第二个选项：使用@click 隐藏和显示选项

查看示例：https://bbbootstrap.com/snippets/tailwind-css-dropdown-menu-85681515

【讨论】：

请注意，第一个选项需要flowbite.js，第二个需要alpine.js。您可以使用纯 javascript 轻松做到这一点，这样简单的用例不需要库。