使用HTML、CSS和JS的自定义下拉列表

大家好，今天我将展示使用 HTML、CSS 和 Javascript 的自定义下拉菜单，这个的独特之处在于你必须编写一次javascript部分并且可以用它创建多个下拉列表。

数据属性

它基本上是一个自定义 HTML 属性，我们可以使用元素的自定义数据创建它。它是全局属性，可以在 CSS 和 Javascript 中访问

• 如何在 CSS 中访问它 – 我们可以在 CSS 中访问数据属性，但只能在::before和::after伪元素中

<p data-category="Web development">Web Development</p>

p::before{content:attr(data-category);}

它将获取data-category属性的内容，并将其放入::before伪元素的内容中

• 如何在Javascript中访问它

let text = document.querySelector("p");// To get the attribute valuelet category = text.getAttribute("data-category");// To set the attribute valuetext.setAttribute("data-category","Full stack");

• 基本上我已经在html中为下拉菜单创建了一个模板，其中并排有一个按钮和链接容器。
• 按钮有 data-dropdown-id，链接容器有data-content-id，两者应该相同，你可以在上面的codepen中查看。
• 然后我使用它们的数据属性访问 javascript 中的按钮和链接包装器。
• 之后我在按钮上使用 foreach 循环并将事件监听器附加到所有按钮
• 在每个按钮的事件监听器中，我在链接容器上使用 foreach 循环，并检查按钮数据下拉 ID 值是否等于链接容器数据内容 ID 值，在其他部分，我已经设置了所有另一个将容器数据下拉值链接为 false，它将做的是关闭所有其他下拉列表，只打开符合条件的下拉列表。
• 如果它与这两个值都匹配，则检查该特定链接容器另一个名为 data-dropdown 的属性，它的布尔值为 true/false，我用它来切换下拉列表。
• 对于链接部分，您必须将链接包装在具有类“dropdown-content”的容器中，我使用该类名来切换容器的显示值，因此将此类放入链接容器中，然后它将起作用。
• 你还可以分别设置下拉按钮和链接部分的样式。