Javascript 如何使用css模拟在：before元素（图标）上显示/隐藏的单击事件？

有没有一种方法可以用CSS模拟点击，从而触发只使用CSS的：before psuedo元素的显示/隐藏

注意：我不能更改HTML

我有一把js小提琴，显示我到目前为止所做的一切。但它只能使用：悬停。我想如果有人可以点击字体图标，然后显示列表项目。如果没有一种方法只使用CSS来实现这一点，有人能帮我实现一个javascript解决方案吗

.cat父项：之前{
内容：“\f067”；
字体系列：Fontsome；
字体大小：20px；
颜色：黑色；
位置：绝对位置；
左：250px；
光标：指针；
}
.儿童{
高度：自动；
最大高度：0；
溢出：隐藏；
过渡：最大高度500ms，易于进出；
}
.猫的父母：悬停{
最大高度：100%；
}

（21）


(1)


(20)

一个想法（但与其说是好主意，不如说是黑客）是使用

tabindex

和

：focus

来模拟对元素的点击

以下是一个例子：

.cat parent>span{
大纲：无；
光标：指针；
}
.cat parent>span:after{
内容：“\f067”；
左边距：80px；
字体系列：Fontsome；
字体大小：20px；
颜色：黑色；
}
.儿童{
高度：自动；
最大高度：0；
溢出：隐藏；
过渡：最大高度500ms，易于进出；
}
.cat父项>范围：焦点+ul{
最大高度：100%；
}
/*这将避免ul在单击其内部链接时消失*/
.猫父母ul：悬停{
最大高度：100%；
}

(21)


(1)


(20)

虽然您无法在CSS中创建单击事件，但可以轻松使用jQuery使其可单击并显示子列表。由于您无法编辑HTML，最好的方法是摆脱CSS中的

：hover

状态，并使

.children

列表在默认情况下不可见。然后可以使用jQuery

.slideToggle（）

方法使其在单击时显示

您也不能针对

：after

元素（即+按钮），因为它是一个伪元素，所以您必须针对整行。参见下面的工作示例

不要忘记在脚本文件中包含jQuery：

$（'.cat-item-253'）。单击（函数（）{
$（'.children'）.slideToggle（）；
})

.cat父项：之前{
内容：“\f067”；
字体系列：Fontsome；
字体大小：20px；
颜色：黑色；
位置：绝对位置；
左：250px；
光标：指针；
}
.儿童{
显示：无；
高度：自动；
最大高度：0；
过渡：最大高度500ms，易于进出；
}

（21）


(1)


(20)

您可以像其他建议的那样，将

:hover

更改为

:active

或

:focus

，但两者都不起作用。您可以改用

：target

。它只适用于超链接“

• 将类

  子类
  更改为ID

• 将主菜单的

  href

  更改为

  #children

现在，当您单击主菜单时，子菜单将出现。单击任何其他链接，菜单将折叠

.cat父项：之前{
内容：“\f067”；
字体系列：Fontsome；
字体大小：20px；
颜色：黑色；
位置：绝对位置；
左：250px；
光标：指针；
}
#孩子们{
高度：自动；
最大高度：0；
溢出：隐藏；
过渡：最大高度500ms，易于进出；
}
#儿童：目标{
最大高度：100%；
}

（21）


(1)


(20)

您无法使用CSS模拟单击。只需在js中绑定一个事件处理程序即可。最接近的方法是添加一个

：active

伪类选择器，并在应用该选择器时显示菜单项。但必须有人实际单击该元素才能使其工作。虽然您无法模拟“单击”，但您可能需要探索

：focus

和/或

：active

psuedo-classes。因此，您需要

。单击cat parent

，然后将ul的最大高度更改为100%，就像您的悬停一样？也就是说，它必须是获得

：active

（或

：focus

）的锚点，而不是

：before

伪元素。最跨浏览器的方式是在

~

中使用锚定和焦点，这个答案在Chrome和其他一些浏览器中都有效，但在FF中不起作用。OP确实提到html不能被删除changed@Huangism我只是去了fast；）并且正在编辑..我对元素的位置，现在它也应该与FF一起工作：）@Huangism也删除了跨度。顺便说一下，它没用；）你错过了我的观点

（21）

这是帖子中的额外html，OP提到html无法更改谢谢。我将在几分钟内尝试实现它，并向您报告。：）jquery不是问题标签的一部分谢谢，我有一个妙招