html - CSS 焦点 : Is there a way to unfocus?

Question

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

我试过了，但没有成功:

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

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

这是代码和 fiddle :

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

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

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

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

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