悬停在一个元素上，使另一个元素向下滑动

Question

我有一个使用 Wordpress 内置功能制作的顶级导航。然后我有另一个函数，它使用顶级导航的页面 id 来创建它的子页面列表。我希望这个 div 在相应的顶部菜单项悬停时向下滑动。

<header>
...
   <nav class="clear screen">
      <?php wp_nav_menu( array( 'theme_location' => 'primary', 'depth' => 1,) ); ?>
   </nav>
</header>

<div id="dropdown-contain">
        <ul class="solutions-dropdown">
            <li><a href="/solutions/">By Industry</a></li>
            <li><a href="/solutions/by-module/">By Module</a></li>
        </ul>
        <?php 
            // use wp_list_pages to display parent and all child pages all generations (a tree with parent)
            $parent = 85;
            $args=array(
              'child_of' => $parent
            );
            $pages = get_pages($args);
            if ($pages) {
            $pageids = array();
            foreach ($pages as $page) {
                 $pageids[]= $page->ID;
            }

            $args=array(
              //'title_li' => 'Tree of Parent Page ' . $parent,
              'include' => implode(",", $pageids)
            );
            wp_list_pages($args);
            }
        ?>
</div>

#dropdown-contain 隐藏在我的样式表中。 由于 wp_nav_menu 正在创建我的顶级列表，因此我无法将我的子列表设为嵌套列表，这就是我将其设为单独的 div 的原因。

这是我目前拥有的 jquery：

$(document).ready(function() {

    $("li.page-item-6").mouseenter(function(){
        $('#dropdown-contain').slideDown().clearQueue();
        $("#dropdown-contain").mouseover(function(){
            $('#dropdown-contain').stop().css('display', 'block');
        });
    });

    $("#dropdown-contain").mouseout(function(){
        $('#dropdown-contain').clearQueue().slideUp();
    });

});

这里的问题是，如果您在退出前不将鼠标悬停在它上面，子导航将保持打开状态。如果我只是将鼠标悬停在顶级元素上而不悬停在子菜单上，则子菜单将保持打开状态，直到我将鼠标悬停在它的上方和下方。所以，我试图包括这个：

$("li.page-item-6").mouseout(function(){
        $('#dropdown-contain').clearQueue().slideUp();
});

当我包含这个时，子菜单的行为有点奇怪。如果我在菜单完成向下滑动之前将鼠标悬停在顶部列表项上并且关闭得太快，则在下一次悬停时它只会滑动到同一点。因此，经过几次仓促的悬停后，菜单完全停止滑动，直到我刷新页面。

总之，我想将鼠标悬停在一个列表项上，触发一个完全独立的 div 向下滑动。当鼠标移出列表项或 div 时，菜单将向上滑动而不会出现任何尴尬的跳跃。如果有人可以帮助我或找到可能对我有帮助的链接，我将不胜感激！

Answer 1

试试这个代码：

$(document).ready(function() {
    $("li.page-item-6").mouseenter(function(){
        $('#dropdown-contain').stop(true).slideDown();
    });

    $("#dropdown-contain, li.page-item-6").mouseleave(function(){
        $('#dropdown-contain').stop(true).slideUp();
    });
});

.stop() - 停止匹配的当前正在运行的动画 元素。 http://api.jquery.com/stop/