单击外部任何位置时显示/隐藏div将关闭（仅限CSS）

Question

我拼命想让这件事发挥作用。我在这个帖子上看到了一个很棒的显示/隐藏解决方案，只有css： Show hide divs on click in HTML and CSS without jQuery

现在我遇到以下问题：如果您单击任何位置或现在显示的div内的链接，div将自行关闭。

在折叠2中观看： http://jsbin.com/juceja/2/edit

有谁知道解决方案？它让我疯了！ 如果你有更好的解决方案来解决这个问题或更好的代码，请告诉我。

提前致谢！ 迈克尔

Answer 1

问题

您的链接存在的问题是，当您单击它时，“open”div会失去焦点。导航锚链接时，浏览器会重置焦点。由于整个解决方案都基于对div的关注，如果焦点转移到其他地方，它将会破裂。使用“tab”键也会移动焦点，导致div关闭。

替代解决方案＃1

您可以尝试在链接到的主题中尝试第一个解决方案。在那里，复选框用于让用户切换打开div。缺点是复选框彼此独立，因此切换第二个div不会改变第一个div状态。

替代解决方案＃2

如果上面的最后一点很重要，那么使用单选按钮的略微修改版本可能会起作用： http://jsbin.com/noxozedofo/2/edit

在这个版本中，我们使用了两个单选按钮（而不是复选框，在您链接的答案中使用了）。标签将可点击标题包裹起来，使其在单击时以单选按钮为目标。单击div时，将选中单选按钮，这样就可以使用：checked伪选择器来设置div的样式。锚点链接不再是问题，因为单选按钮将保持其状态。

此处的缺点是您无法再次单击单选按钮以“取消选中”它。唯一的方法是单击另一个div。

以下是此解决方案在代码中的样子：

<label class="collapse" for="_1">
  <h2>Collapse 1</h2>
</label>
<input id="_1" type="radio" name="test">
<div>Content 1</div>

<label class="collapse" for="_2">
  <h2>Collapse 2</h2>
</label>
<input id="_2" type="radio" name="test">
<div>
  Content 2...
  <a href="#link">link</a>
</div>


.collapse{
  display:block;
}
.collapse + input{
  display:none;
}
.collapse + input + *{
  display:none;
}
.collapse+ input:checked + *{
  display:block;
}

Answer 2

你试过

吗？

.collapse > * + *:hover {
  display: block !important;
}