对象随着消失的子菜单代码- jQuery错误？

Question

我正在建设一个网站，并有一个菜单，其中有下拉。由于设计的本质，我目前检测鼠标在菜单项上方的时间，并显示相关的子菜单。

                                <div class="menu-responsibility menu-item">
                                            <a class="menu-click" href="<?php echo ($baseURL);?>responsibility" title="Responsibility" ></a>

                                                            <div class="sub-responsibility">
                                                                <ul class="sub-list">
                                                                    <li><a href="<?php echo $baseURL; ?>responsibility/social" title="Social Responsibility">Social</a></li>
                                                                    <li><a href="<?php echo $baseURL; ?>responsibility/environmental" title="Environmental Responsibility">Environmental</a></li>
                                                                    <li><a href="<?php echo $baseURL; ?>responsibility/philanthropy" title="Philanthropy">Philanthropy</a></li>
                                                                </ul>      
                                                            </div>
                            </div>

这是我写的JS：

        /* NOTE: Visibility was added due to display objects being clickable with 0 opacity. */
$(".menu-click").hover(function () {
$(this).css('visibility', 'visible');
$(this).parent().css('visibility', 'visible');
$(this).parent().fadeTo("fast", 1);
}, function () {
if ($(this).parent().is(':hover')) {
//alert ("hovering");
} else {
    $(this).parent().fadeTo("fast", 0);
}
});

$(".menu-click").parent().mouseleave(function () {
$(this).fadeTo("fast", 0, function() {
    // this function will called after the opacity animation has completed
    $(this).delay(500).css('visibility', 'hidden');
});
});
    /*End Sub-Menu Function */

当不透明度为0且元素仍然可见时，可以单击它们(只是看不到)，这是不可接受的。

Bug:有时，完全随机的，一些菜单的悬停状态(以及相邻的子菜单)消失了。它们不再存在，也无法突出显示。这将随机发生在其中一个菜单项，如果你运行你的鼠标在他们很快。当“结果”菜单项执行此操作时，Firebug将显示以下内容。它不能再突出显示。

<div class="menu-home menu-item">
<div class="menu-services menu-item" style="visibility: hidden; opacity: 0;">
<div class="menu-results menu-item" style="opacity: 0; visibility: hidden;">
<div class="menu-clients menu-item" style="visibility: hidden; opacity: 0;">
<div class="menu-about menu-item" style="opacity: 0; visibility: hidden;">
<div class="menu-responsibility menu-item" style="opacity: 0; visibility: hidden;">
<div class="menu-contact menu-item">

很奇怪的虫子，希望你们能帮忙！我的开发站点是可用的，可能会有所帮助：http://www.kipdo.com

提前感谢！

Answer 1

您的问题可能与如何使用.parent()函数有关。

我建议您使用JQuery的.hide()和.show()函数，而不是修改内联CSS。另一个建议是使用父标记来维护悬停/隐藏/显示，这样您就不必处理菜单中任何链接的父级。