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

Question

我需要创建一个简单的手风琴样式菜单，单击时显示/隐藏。它适用于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中，当一个元素都有display属性设置为none，它不能在聚焦状态，我相信这是一个更可预测的和均匀的行为。但是，在Firefox中，即使元素的display属性设置为none，它也是如何保持焦点。

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

您可以使用这种方法吗？ ：NO ...原因是：

即使您考虑使用Firefox，由于手风琴内容的可见性基于焦点，只要用户点击网站上的任何地方，即使在空白部分的网站，该元素将失去其重点，并不会按预期工作。

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

为CSS只手风琴更好的方法

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

#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>

Answer 2

Try This 

.show { display:none;} 
 
.hide , .show { position :absolute; top:0; left:0; } 
 
.hide:focus {opacity:0; font-size:0;} 
 
.hide:focus + .show { display:block;} 
 
.hide:focus~.list { 
 
    display:none; 
 
    }

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