自定义选择下拉列表共享类名但行为不同

问题描述

StackOverflow 成员和专家。

我有这支笔：https://codepen.io/rusurano/pen/NWpWXdB，它的行为很奇怪，原因我不知道。

结构和行为：三个基于无线电输入的自定义选择。聚焦选择时，它会显示可供选择的可能选项。在选择之外单击将移除焦点，隐藏选项。点击任何选项都会选择它并隐藏其他选项。

问题：只有第一个自定义选择（最上面的）才能正常工作。另外两个在点击选项时甚至没有显示选项列表。

自己的研究和想法：我什至不知道为什么会发生这种情况。据我所知，相同的类名应该意味着具有该类名的所有元素的相同行为，除了 :first-child 或类似的伪类选择器的情况，这些选择器仅包含匹配元素的样式。但是，我的代码中没有这样的选择器。它使用的所有伪类都是 :before、:after 或基于事件的伪类，例如 :hover。当我将包装器的类名更改为 HTML 中的其他名称时，自定义选择变成了按预期工作的一系列无线电输入。我明白为什么点击他们的文本会修改最上面选择的值：这是因为 ID 是相同的。将它们更改为唯一 ID 不会使选择起作用，因此情况并非如此。

预先感谢您提供有关如何使其工作的任何形式的解释和/或建议的演示。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）