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/

原文由 Bethfiander 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我刚刚发现了一个技巧，我认为你可以做到，只需设置：

 li.collapse:focus
{ pointer-events: none; }

并确保您的 li 下有一个可以聚焦的对象。

根据您的情况，可能需要进行一些调整。

原文由 aliqandil 发布，翻译遵循 CC BY-SA 3.0 许可协议