顺风点击显示数据

Question

我在顺风css中显示了on子菜单，

如何通过执行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>

是否有办法只使用顺风css或js？

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

​

多次跌落

如果您希望有一个代码来处理许多下拉列表，可以用css类替换dropdown id (我假设每个下拉列表的结构都是相同的)：

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

Answer 2

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

如果要在单击元素时显示下拉菜单，请确保将数据下拉-切换=“dropdownId”数据属性添加到将切换下拉菜单的元素中。

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

第二个选项:使用@单击“隐藏并显示”选项

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