4

我在使用 jQuery superfish 菜单插件时遇到了一个奇怪的问题，使用时一切正常，animation: {opacity: 'show'}应用于ul元素的内联样式是：

display: none; visibility: hidden;

我想使用animation: {height: 'show'} ，但是使用它时，下拉菜单仅显示一级下拉菜单，因为 superfish 正在添加overflow: hidden;到ul元素中，并且应用的内联样式是：

display: none; overflow: hidden; visibility: hidden;

所以问题是overflow: hidden;阻止嵌套的 ul 元素在悬停时显示所以我尝试添加overflow: visible !important;修复了问题但菜单的行为缓慢并且我不想要这个解决方案。

所以我发现* {box-sizing: border-box;}我的 css 文件内部正在产生这种行为，当删除时，superfish 不会添加overflow: hidden;到 ul 元素中。

我在 codepen 上创建了一个演示：http: //codepen.io/anon/pen/Awqdn

正在发生的事情的摘要：

1-animation: {opacity: 'show'}即使我有也可以正常工作* {box-sizing: border-box;}

2-animation: {height: 'show'}由于插件添加到ul元素的溢出隐藏不起作用，并且* {box-sizing: border-box;}从css文件中删除时解决了这个问题。

那么我该如何解决这个问题呢？overflow: hidden;当我有什么让超级鱼添加的时候box-sixing: border-box;？

并提前感谢。

4

2 回答 2

5

没有* {box-sizing: border-box;}它在动画期间给出overflow:hidden并在动画结束后将其删除。但是有了这条线，它不会在动画后删除溢出。我在 jQuery 跟踪器http://bugs.jquery.com/ticket/10335中找到了票

要解决此问题，您可以在动画后移除溢出

jQuery(function($) {
  $('#nav').superfish({
    animation: {height:'show'},
    onShow: function(){
      $(this).css("overflow", "visible");
    }
  });
});

http://codepen.io/anon/pen/Apqyl

于 2013-01-10T13:44:44.940 回答
1

也许使用 clearfix hack 而不是 overflow:hidden;

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
于 2013-01-08T14:20:42.970 回答