可折叠下拉菜单下方的文字无法选择，链接无法点击

Question

Here's a fiddle显示我写过的下拉菜单中的a demo。

问题：

位于下拉菜单（“频道”）下方的部分文本（本例中的网站标题链接）无法选择/不可点击，而普通“主页”链接下方的其他部分则呈现得很好。 （你可以在演示中试试。）

为什么我认为这种情况发生了？我在菜单（“频道”）时使用JavaScript动态更改height和0值之间的auto被点击;不是display: none;之类的东西，因此菜单项元素只是隐藏，使得它下面的文字不可选择/可点击。

问题是，如何修复此问题，而不会破坏菜单的当前功能和样式（例如transition下拉列表）。我尝试过的所有内容，包括display: none | block;，visibility: hidden | visible;和opacity: 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/

Answer 2

单击菜单时，使用脚本将.collapse div的高度和宽度设置为0 。

更新：从@Gaby回复中获得此提示“.collapse：not（.in）”。

.collapse:not(.in){
    width:0;
 }

这也行。 http://jsfiddle.net/8Mde7/3/

这就是我的意思，设置宽度：0。