您的位置:首页 > 百科大全 |

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

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

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

数据属性

它基本上是一个自定义 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”的容器中,我使用该类名来切换容器的显示值,因此将此类放入链接容器中,然后它将起作用。
  • 你还可以分别设置下拉按钮和链接部分的样式。