CSS只有折叠菜单才能在firefox中运行，而不是webkit浏览器，为什么？

Question

早些时候获得了有关如何使此折叠菜单正常工作的帮助。但现在突然间它的链接将无法正常工作。他们只是再次收缩菜单。有什么想法吗？

非常感谢！

CSS：

#list, .show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:block; }
@media print { .hide, .show { display: none; } }
li.folding {list-style-type:none; margin-left:-20px;}

HTML：

<div>
<a href="#" class="hide">[Link]</a>
<a href="#" class="show">[Link]</a>
<ol id="list">
    <li class="folding"><a href="http://www.google.com">Item 1</a></li>
    <li class="folding"><a href="http://www.google.com">Item 2</a></li>
    <li class="folding"><a href="http://www.google.com">Item 3</a></li>
</ol>
</div>

Answer 1

您的代码可以正常工作..

<强> Working JSFiddle. ( IN FIREFOX ONLY ! )

问题是更多browser compatibility，在Firefox中运行JSFiddle并且它将按照您的预期工作，在chrome和safari上它不起作用。

针对所有浏览器的更好的解决方案是使用Javascript/jQuery隐藏并在点击按钮时显示菜单，这将适用于所有手机，桌子和广告。浏览器始终使用最少的代码。

<小时/>

更新

以下是使用jQuery进行此操作的快速示例。您可以看到代码非常小，易于阅读和扩展，并且也适用于所有浏览器！

VIEW THE JSFIDDLE

<强> HTML：

<div>
<a href="#" class="toggler">[Link]</a>
<ol id="list">
    <li class="folding"><a href="http://www.google.com">Item 1</a></li>
    <li class="folding"><a href="http://www.google.com">Item 2</a></li>
    <li class="folding"><a href="http://www.google.com">Item 3</a></li>
</ol>
</div>

<强>的Javascript / jQuery的：

// When the page is loaded and ready
$(function(){
    // On click of `.toggler` (the <a> with class `.toggler`)
    $('.toggler').click(function(){
        // Toggle the list menu (toggle means if hidden show it, else hide it)
        $('#list').fadeToggle(); // also try.. `slideToggle()`
    });
});

以上HTML＆amp; Javascript完全相同，只不过它可以在所有设备上运行！

View the JSFiddle - Javascript/jQuery Version

Answer 2

由于点击另一个链接会使第一个链接松散焦点，因此列表中的项目将重新隐藏。

由于焦点丢失总是在执行点击行为之前完成，因此点击不会到达链接，因为它不再位于鼠标下。