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-contains隐藏在我的样式表中。由于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/

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

1 个答案: