html - CSS only collapsing menu 只适用于 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 ! )

问题更多的是浏览器兼容性，在 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 和 Javascript 做的事情完全一样，只是它适用于所有设备!

View the JSFiddle - Javascript/jQuery Version