1

这是一个小提琴，向您展示了我编写的下拉菜单的演示。

问题：

截屏

下拉菜单（“频道”）下方的部分文本（在这种情况下为网站标题链接）是不可选择/不可点击的，而普通“主页”链接下方的另一部分则呈现得很好。（您可以在演示中尝试。）

为什么我认为会发生这种情况：单击菜单（“通道”）时，我使用 JavaScript 动态更改height介于0和值之间；auto不是类似的东西display: none;，因此菜单项元素只是隐藏的，使其下方的文本无法选择/可点击。

截屏

问题是，我该如何解决这个问题，而不破坏菜单的当前功能和样式（即transition下拉菜单）。我尝试过的一切，包括display: none | block;, visibility: hidden | visible;，opacity: 0 | 1;但都让我失望了。

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

4

2 回答 2

1

它在FF中工作

对于 Chrome，由于某种原因，子元素 ( of#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/

于 2012-12-22T17:47:15.133 回答
0

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

更新：形成@Gaby 答案得到这个提示“.collapse:not(.in)”。

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

这也将起作用。http://jsfiddle.net/8Mde7/3/

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

于 2012-12-22T18:07:30.507 回答