0

我正在建立一个站点，并且有一个带有下拉菜单的菜单。由于设计的性质，我目前检测鼠标何时悬停在菜单项上；并显示相关的子菜单。

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

错误： 有时，完全随机地，菜单（和相邻的子菜单）的某些悬停状态会消失。它们不再存在，无法突出显示。如果您在其中一个菜单项上快速移动鼠标，这将随机发生。当“结果”菜单项执行此操作时，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

提前致谢！

4

1 回答 1

0

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

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

于 2013-02-08T09:04:41.717 回答