html - 可折叠下拉菜单下方的文本不可选择，链接不可点击

Question

Here's a fiddle给你看a demo我写的下拉菜单。

问题:

下拉菜单(“ channel ”)下方的部分文本(在本例中为网站标题链接)无法选择/无法点击，而正常“主页”链接下方的另一部分呈现得很好。 (您可以在演示中尝试。)

为什么我认为会发生这种情况:我使用 JavaScript 在 0 和 auto 之间动态更改 height单击菜单(“ channel ”)时的值；不是像 display: none; 这样的东西，因此 menu-item 元素只是隐藏的，呈现在它下面的文本不可选择/不可点击。

问题是，我该如何解决这个问题，而不破坏菜单的当前功能和样式(即下拉菜单的 transition)。我尝试过的一切，包括 display: none | block ；，可见性:隐藏 |可见；，和 不透明度:0 | 1; 让我失望了。

编辑:如最新版本的 Google Chrome 和 Chromium 网络浏览器所示。

Answer 1

它在 FF 中工作

对于 Chrome，由于某些原因，子元素(#channels-menu-item-wrapper)不遵守 overflow:hidden 父级使用(它仅以视觉方式尊重隐藏..)

您可以使用延迟转换并将子元素移开..

.collapse > div{
    position:relative;

}
.collapse:not(.in) > div {
    left:-10000px;    
    -webkit-transition:left 0s ease;
    -webkit-transition-delay:0.35s; /*same delay as the time it takes to open/close so it does not show*/
}

(我只添加了 -webkit- 供应商特定规则。适用于所有)

演示在 http://jsfiddle.net/gaby/cfH33/5/