2

之前获得了有关如何使此折叠菜单正常工作的帮助。但是现在突然之间，其中的链接不起作用。他们只是再次收缩菜单。有任何想法吗？

非常感谢！

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

2 回答 2

2

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

工作 JSFiddle。（仅在 Firefox 中！）

问题更多browser compatibility，在 firefox 中运行 JSFiddle，它会按预期工作，在 chrome 和 safari 上它不起作用。

更好的解决方案（适用于所有浏览器）是用于Javascript/jQuery在单击按钮时隐藏和显示菜单，这将在所有手机、表格和浏览器上以最少的代码一致地工作。

更新

这是使用jQuery. 您可以看到代码非常小，易于阅读和扩展，并且适用于所有浏览器！

查看 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 做同样的事情，除了它可以在所有设备上工作！

查看 JSFiddle - Javascript/jQuery 版本

于 2013-08-08T14:42:25.547 回答
0

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

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

于 2013-08-08T14:43:06.387 回答