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

Question

我正拼命想让这东西工作。我只在这个线程上看到了一个很棒的显示/隐藏解决方案 css ： Show hide divs on click in HTML and CSS without jQuery

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

在此处观看崩溃 2： http://jsbin.com/juceja/2/edit

有人知道解决办法吗？这让我发疯！如果您对此问题有更好的解决方案或更好的代码，请告诉我。

提前致谢！迈克尔

Answer 1

你试过

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

Answer 2

问题

您的 link 的问题是当您单击 "open" div 时它会失去焦点。浏览器在导航锚点时重置焦点 link。由于整个解决方案基于焦点在 div 上，如果焦点移到其他地方，它就会中断。使用 "tab" 键也会移动焦点，导致 div 关闭。

备选方案 #1

您可以改为尝试您 link 访问的线程中的第一个解决方案。在那里，复选框被用来让用户切换打开 divs。缺点是复选框彼此独立，因此切换第二个 div 不会改变第一个 div 的状态。

备选方案#2

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

在此版本中，我们使用了两个单选按钮（与您 link 编辑的答案中使用的复选框相对）。标签将可点击的 headers 包裹起来，使它们在点击时指向单选按钮。单击 div 时，单选按钮将变为选中状态，这使得可以使用 :checked 伪选择器来设置 div 的样式。锚 link 不再是问题，因为单选按钮将保持其状态。

此处的缺点是您无法再次单击单选按钮 "uncheck"。唯一的方法是单击另一个 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;
}

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

Show / hide div closes when clicking anywhere outside (CSS only)

html

css

collapse

问题

备选方案 #1

备选方案#2