javascript - jquery 下拉 div 在离开父链接后消失

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;
}

我的问题 是在您离开“搜索”链接并将光标向下移动到下拉菜单(“drop”div)后，下拉菜单消失然后又回来了.

如果需要，这里有这个问题的演示 http://goandco.w7.ext.starberry.com (我会尝试将其放入 jsfiddle 以供将来引用)。

Answer 1

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

所以改变:

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

收件人:

jQuery(document).ready(function () {

另外，删除#nav .drop的left和top位置。

您可能还想在列表项而不是 anchor 上触发事件。当在列表项上触发它时，子菜单将在您将其悬停时保持可见。否则，当您模糊 anchor 时，子菜单将向上滑动。然后您需要 next() 方法而不是 sibling() 方法。

将您的 jQuery 更改为:

jQuery(document).ready(function () {
    jQuery('.drop').slideUp(0);

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

检查 this demo .