0

I have a top-level navigation that is being made using a Wordpress built-in function. I then have another function that is taking one of the top level navigation's page id to create a list of it's children pages. I want this div to slide down on hover of the corresponding top menu item.

<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 is being hidden in my style sheet. Since the wp_nav_menu is creating my top-level list, I cannot make my sub-list a nested list, which is why I just made it as a separate div.

Here is the jquery I have at the moment:

$(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();
    });

});

The problem here is that the sub-nav will stay open if you don't hover onto it before exiting. If I just hover over the top level element and don't hover over the sub menu, the sub menu will stay open until I hover on and off of it. So, I tried to include this:

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

When I include this, the sub menu behaves a little strangely. If I hover over the top list item and off too quickly before the menu has finished sliding down, on the next hover it will only slide to that same point. So after a few hasty hovers, the menu stops sliding completely until I refresh the page.

So in summary, I want to hover over one list item, triggering the slide down of a completely separate div. On mouse out of either the list item or the div, the menu will slide back up without any awkward jumping. If anyone could help me out or find me a link that may be helpful I'd really appreciate it!

4

1 回答 1

0

试试这个代码：

$(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/

于 2012-10-29T14:51:43.800 回答