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并且元素仍然可见时，它们可以被点击（只是没有看到），这是不可接受的。

The Bug：有时，完全随机，菜单（和相邻子菜单）的某些悬停状态消失。它们不再存在，无法突出显示。如果您快速在其中运行鼠标，这将随机发生在其中一个菜单项中。当＆＃34;结果＆＃34;时，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">

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

提前致谢！

Answer 1

您的问题可能与您使用.parent（）函数的方式有关。

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

对象随着子菜单代码的消失而消失 - jQuery bug？

1 个答案: