顺风点击显示数据

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>

是否有一种方法可以只使用顺风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类代替dropdownid，像这样(我假设每个下拉菜单的结构将是相同的):

<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

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

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

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

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

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