CSS Accordion 菜单在 Chrome/Safari 中不起作用

Question

我需要创建一个简单的 Accordion 样式菜单，在单击时显示/隐藏。它在 IE11 和 FF 中工作，但在 Chrome/Safari 中不关闭。任何人都可以为这些浏览器提供解决方法吗？我喜欢这段代码的简单性，如果可能的话我想使用它。谢谢!

.show{
  display:none;
}
.hide:focus+.show{
  display:inline;
}
.hide:focus{
  display:none;
}
.hide:focus~#list{
  display:none;
}

<p>Accordian Example</p>
<div>
    <a href="#" class="hide">[hide]</a>
    <a href="#" class="show">[show]</a>
    <ol id="list">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ol>
</div>

Answer 1

我已经在 FF 和 Chrome 上检查过了。

不同行为的原因

在 Chrome 中，当一个元素的 display 属性设置为 none 时，它不能处于聚焦状态，我认为这是一种更可预测和统一的行为。但在 Firefox 中，即使元素的 display 属性设置为 none，它也能保持焦点。

现在，由于两种浏览器在元素焦点保留方面的行为不同，因此代码的净输出是不同的浏览器。

您可以使用这种方法吗？ :不……原因是:

即使考虑到 Firefox，由于 Accordion 内容的可见性是基于焦点的，一旦用户点击网站上的任何地方，即使是在网站的空白部分，该元素也会失去焦点，它不会按预期工作。

要验证这一点，请在 firefox 上打开该示例，单击隐藏，然后单击空白区域，您将看到列表项将重新出现。

仅 CSS Accordion 的更好方法

这使用复选框来决定何时显示或隐藏。我们通过将复选框放置在视口(viewport)之外并使用标签创建可点击区域来隐藏复选框。

#toggler{
position:fixed;
  top:-100px;
}
label{
cursor:pointer;
}
#toggler ~ ol{
  display:none;
}
#toggler:checked ~ ol{
  display:block;
}

#toggler ~ label .show,#toggler:checked ~ label .hide{
  display:inline-block;
}
#toggler:checked ~ label .show,#toggler ~ label .hide{
  display:none;
}

<p>Accordian Example</p>
<div>
  <input id="toggler" type="checkbox" checked/>
    <label for="toggler">
      Toggle Accordion
      <b class="show">[show]</b>
      <b class="hide">[hide]</b>
      
    </label>
    <ol id="list">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ol>
</div>