jquery - jQuery滑动抽屉菜单阻止了其他内容

Question

我的工作菜单（有一个小问题）...

我有一个滑动抽屉菜单系统，已经使用了一段时间了。它使用过渡图像，下面的工作jsFiddle (#1)很好地演示了使用静态div代替图像过渡的相关操作。

我的系统使用容器div和overflow:hidden;以及抽屉div放在其中。当jQuery动画将抽屉滑到容器外部时，它会自动隐藏。当您将鼠标从抽屉移回菜单时，可以使用多种其他技术来停止动画，以防止抽屉过早关闭。

在SO社区的帮助下，该系统投入了大量时间和精力。它为我服务很好，但现在菜单抽屉包含更多内容。更大/更长的抽屉已经揭示了这个新问题，如下所述。

仅出于演示目的，我概述了容器以显示其位置并放慢了动画的速度。最终项目速度更快，没有这些轮廓。

#1 - http://jsfiddle.net/PayFw/143/

如您所见，当需要交互的内容（例如，链接）在这些容器后面或被其部分阻止时，该链接将被覆盖，因此无法点击。可以在Mozilla和Webkit中看到此问题，但在IE-8中看不到。 （在这种情况下，我认为IE无法正常工作。）我尚未测试其他版本。

使用z-index并不是解决方案，因为这只会导致抽屉在内容后面滑动。显然，我希望抽屉在使用时在内容上滑动。



我一直在尝试...

上面的小问题的各种解决方案似乎只会导致更复杂的问题。

我以为这很简单...只需更改即可使容器在visibility:hidden;中不可见。然后，当您将鼠标悬停以调用滑动抽屉时，请更改为visibility:visible;，并在抽屉关闭后返回到visibility:hidden;。即使增加了动画的复杂性，也可以通过回调来完成该操作，以允许关闭的动画在再次使容器不可见之前完成。

当您输入菜单项“ cleanly”（定义为“ cleanly”：从顶部/底部，同时不触摸相邻菜单项）时，它的效果非常好。

但是，这种解决方案带来了一个全新的问题。当您从一个菜单项移至另一个菜单项时，jQuery动画stop()会干扰下一个菜单的打开，并在您仍将其悬停时猛烈关闭它。而且这使回调函数不可靠。。。有时，如您通过灰色轮廓所看到的，使容器可见，从而破坏了此解决方案的全部目的。

#2 - http://jsfiddle.net/PayFw/144/



问题：


是否有另一种方法可以防止system #1在抽屉关闭时也总是阻止内容？
如果不是，是否有办法解决version #2问题？即-在保持与version #1中相同的清洁/可靠操作的同时，获取容器的可见性以正确地与抽屉动画切换。
如果没有简单或实用的解决方案，是否有可以轻松与我的系统集成的jQuery插件？如果是这样，哪个和如何？我知道有很多jQuery菜单抽屉系统，但是我需要一些可以将可自定义的滑动抽屉放在我现有的图像翻转下面的方法（同时又不阻止可能落入抽屉操作区域的任何内容的可点击性）。




编辑：

关于vzwick的回答：他的解决方案虽然简单明了，但还需要进一步说明。他关于使用display:none;和display:block;代替visibility:hidden;和visibility:visible;的声明只是故事的一部分。

我在容器上使用visibility:hidden;。

相反，我应该一直在抽屉上使用display:none;。

为什么？

通过切换visibility:hidden;，容器将停留在内容流内。容器在流程中，并且具有自动尺寸，该尺寸由抽屉尺寸决定。

通过切换display:none;，抽屉将从内容流中删除。通过从流中取出抽屉，其容器将变为零尺寸。因此，尽管容器仍在内容流中，但它们是折叠的，大小为零，不再干扰页面的内容，因此不再需要使它们不可见。

http://jsfiddle.net/PayFw/146/

辉煌。感谢vzwick。

Answer 1

通过分别使用display：block和display：none可以轻松解决您的问题：

$('div[id|="m"]').each(function (i) {

    $(this).hover(enter, leave);

    $ht[i] = ($('#menu-'+i).height());
    $('#menu-'+i).css({
        'top': '-'+$ht[i]+'px',
        'display': 'none' // <--- changed
    });

});

function enter() { 
     j = $(this).attr('id').replace(/m-/, "");
     $('#menu-'+j).data({closing: false}).stop(true, false).animate({top: '0'},800).css({'display' : 'block'}); // <--- changed
};

function leave() { 
     $('#menu-'+j).data({closing: true}).delay(100).animate({top: '-'+$ht[j]+'px'},800, function(){ $(this).css({'display' : 'none'}) }); // <--- changed
};

有关工作示例，请参见this fiddle。

编辑：

为了澄清：

将visibility属性设置为hidden基本上只是说opacity:0的另一种方式。元素仍保留其尺寸和在盒子模型中的位置。就您而言，这意味着它会覆盖其他内容。

相反，将display属性设置为none时，将从框模型/流中完全删除该元素。