Question

我有以下html：

<ul id="nav">
    <li class="has-drop-down">
        <a href="#" class="has-drop-down-a">Search</a>
            <div class="drop" style="display: none;">
                <ul>
                    <li>
                        <ul class="">
                            <li class="item-107"><a href="#">link1</a></li>
                            <li class="item-108"><a href="#">link2</a></li>
                            <li class="item-109"><a href="#">link3/a></li>
                            <li class="item-148"><a href="#">link4</a></li>
                            <li class="item-170"><a href="#">link5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
    </li>
</ul>

不幸的是，html必须具有这种结构（它由cms动态创建）。

我正在使用以下javascript来创建动画：

<script type="text/javascript">
            jQuery('body').ready(function () {
            jQuery('.drop').slideUp(0);

            jQuery('.has-drop-down-a').hover(
                function () {
                    jQuery(this).siblings('.drop').slideDown(500);
                },

                function () {
                    jQuery(this).siblings('.drop').slideUp(500);
                }
            );
            });
</script>

使用的CSS：

#nav .drop {
   left: -9999px;
   padding: 27px 0 0;
   position: absolute;
   top: -9999px;
}
.drop:hover,
.drop ul:hover {
   position:relative;
   top:-1px;
   display: block !important;
}
#nav .drop > ul {
   position: relative;
}
#nav a {
   display: inline-block;
   vertical-align: top;
   margin: 0 0 -27px;
   padding: 0 0 27px;
   position: relative;
}

我的问题 是指您离开＆＃39;搜索＆＃39;链接并将光标向下移动到下拉列表（＆＃39; drop＆＃39; div）下拉消失＆amp;然后回来。

如果需要http://goandco.w7.ext.starberry.com，这里有一个关于此问题的演示（我将尝试将其转换为jsfiddle以供将来参考）。

Answer 1

正如UweB已经评论过的那样，ready()上应该调用document方法。

所以改变：

jQuery('body').ready(function () {

要：

jQuery(document).ready(function () {

此外，删除left的{{1}}和top位置。

您也可能希望在列表项而不是锚上触发事件。在列表项上触发它时，子菜单将在您悬停时保持可见状态。否则，当您模糊锚点时，子菜单将会滑动。然后，您需要使用#nav .drop方法而不是next()方法。

将您的jQuery更改为：

sibling()

检查this demo。

Answer 2

var time=10000;
$('#Menu').mouseenter(function(){ 
    t=setTimeout("showMenu()",500);
});

$('#categoryMenu').mouseleave(function(){
    clearTimeout(t);
    t=setTimeout("hideMenu()",100);
});

function showMenu(){
    $('#megaDrop').fadeIn('fast');      
}

function hideMenu(){
    $('#megaDrop').hide('fast'); 
}

$('#megaDrop').hover(function(){
  clearTimeout(t);
},function(){
    clearTimeout(t);
    t=setTimeout("hideMenu()",100);

}

使用计时器解决您的问题

离开父链接后，jquery dropdown div消失

2 个答案: