CSS 焦点：有没有办法取消焦点？

Question

我正在我的 css 中集中注意力，因为我正在考虑用这个做一个下拉列表。但是，我遇到了“不聚焦”的问题：目前，如果您在 div.inside 外部单击，这将是我想要的焦点。但是，当您再次单击 li.collapse 时，我也想让它失去焦点，这样 li.collapse 就像一个开/关按钮。

我没有运气就试过这个：

div.inside:active + li.collapse:focus { display: none;}

有没有人知道解决这个问题的另一种方法，或者甚至可能没有 JavaScript？

这是代码和小提琴：

html：

<li class=collapse tabindex="1"><a>&nbsp;Click To See List&nbsp;</a> <div class="inside">
List 1....</div></li>

css：

li.collapse > a{background: #cdf; cursor: pointer; display: block;}
li.collapse:focus{ outline: none;}
li.collapse > div.inside{ display: none;}
li.collapse:focus div.inside{display: block; }
div.inside:focus{ display: none;}
div.inside{background: #cdf; }
div.inside:active + li.collapse:focus { display: none;}

https://jsfiddle.net/q2e1vnny/

Answer 1

您将需要使用 JavaScript 以编程方式聚焦和模糊元素。CSS 只允许您对发生过事件的元素设置样式。

尝试：

document.getElementById('SomeId').focus();
document.getElementById('SomeId').blur();