点击显示数据顺风

Question

我正在通过顺风悬停显示子菜单 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？

Answer 1

第一个选项：使用数据下拉切换属性

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

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

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

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

Answer 2

您可以使用 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 class，就像这样（我假设每个下拉菜单的结构都是相同）：

<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');
  });
});

点击显示数据顺风

Tailwind on click show data

javascript

css

tailwind-css

多个下拉菜单