带鼠标悬停/鼠标悬停的jQuery手风琴导航

I'm trying to create an accordion navigation menu with the following properties:

我正在尝试使用以下属性创建手风琴导航菜单:

Hover over a parent LI, and its sub-menu slides down. If you mouse down to hover over the sub-menu, it stays open as you'd expect.

将鼠标悬停在父LI上,其子菜单向下滑动。如果您将鼠标按下鼠标悬停在子菜单上,它会保持打开状态,如您所料。

If you move your cursor off of either the parent link or the sub-menu, the sub-menu slides up again.

如果将光标移离父链接或子菜单,子菜单将再次向上滑动。

I thought I was getting close - I can get the sub-menu to slideDown, but when I hover over it, I've had to mouseout on the parent LI, triggering a slideUp. I just can't figure out how to make this do what I need it to!

我以为我越来越近 - 我可以将子菜单设置为slideDown,但是当我将鼠标悬停在它上面时,我不得不在父LI上进行鼠标移动,触发一个slideUp。我只是想不出如何做到这一点我需要它!

Here's my script:

这是我的脚本:

<script type="text/javascript">

$(document).ready(function() {

//If its a page parent (based off wordpress), add the class "display-list"
//This way the accordion will be opened up on the page you are on.
if ($('#nav li').hasClass("current_page_parent")) {
$('#nav .current_page_parent ul').addClass("display-list"); }

// Hide the submenus
$('#nav li ul').hide();
// Add a class to the parent li IF it has sub UL's
$("#nav li:has(ul)").addClass("nav-parent");
// Add a class to sub-UL if it has a parent LI
$("#nav li ul").addClass("nav-child");

// When you hover over the link in the parent LI...
$('#nav li.nav-parent').mouseover( function() {
// ...slide the sub-UL into view, and remove the 'display-list' class
$(this).children('.nav-child').slideDown(1000).removeClass("display-list");
}).mouseout( function() {
$(this).children('.nav-child').slideUp(1000);
});

});
</script>

And here's my HTML markup:

这是我的HTML标记:

<!-- Start: Navigation -->
<ul id="nav">
<li class="hidden"><a href="#main">Skip to Content</a></li>
<li class="page_item page-item-2 current_page_item"><a href="http://www.examplewebsite.com">Home</a></li>
<li class="page_item page-item-44"><a href="http://www.examplewebsite.com/who-we-are/">Who we are</a>
    <ul>
        <li class="page_item page-item-99"><a href="http://www.examplewebsite.com/who-we-are/partners-consultants-and-alliance-partners/">Partners, Consultants and Alliance Partners</a></li>
        <li class="page_item page-item-105"><a href="http://www.examplewebsite.com/who-we-are/who-we-work-with/">Who we work with</a></li>
        <li class="page_item page-item-107"><a href="http://www.examplewebsite.com/who-we-are/coffey-graham-north-star-alliance/">Coffey Graham North Star Alliance</a></li>
    </ul>
</li>
<li class="page_item page-item-47"><a href="http://www.examplewebsite.com/what-we-do/">What we do</a>
    <ul>
        <li class="page_item page-item-48"><a href="http://www.examplewebsite.com/what-we-do/technology-transactions-and-outsourcing/">Technology transactions and Outsourcing</a></li>
        <li class="page_item page-item-53"><a href="http://www.examplewebsite.com/what-we-do/dispute-resolution-and-avoidance-arbitration-mediation-and-litigation/">Dispute Resolution and Avoidance: Arbitration, Mediation and Litigation</a></li>
        <li class="page_item page-item-56"><a href="http://www.examplewebsite.com/what-we-do/company-commercial-and-private-equity-work/">Company/Commercial and Private Equity Work</a></li>
        <li class="page_item page-item-314"><a href="http://www.examplewebsite.com/what-we-do/virtual-general-counsel-service/">Virtual General Counsel Service</a></li>
        <li class="page_item page-item-117"><a href="http://www.examplewebsite.com/what-we-do/training-and-coaching/">Training and coaching</a></li>
    </ul>
</li>
<li class="page_item page-item-59"><a href="http://www.examplewebsite.com/see-us-in-action/">See us in action</a>
    <ul>
        <li class="page_item page-item-152"><a href="http://www.examplewebsite.com/see-us-in-action/blog/">Blog</a></li>
        <li class="page_item page-item-154"><a href="http://www.examplewebsite.com/see-us-in-action/podcasts/">Podcasts</a></li>
        <li class="page_item page-item-150"><a href="http://www.examplewebsite.com/see-us-in-action/training-and-coaching/">Training and coaching</a></li>
        <li class="page_item page-item-160"><a href="http://www.examplewebsite.com/see-us-in-action/publications/">Publications</a></li>
    </ul>
</li>
<li class="page_item page-item-69"><a href="http://www.examplewebsite.com/contact/">Contact</a></li>
</ul>
<!-- End: Navigation -->

I'd really appreciate any help, please!

拜托,我真的很感激!

4 个解决方案

#1

OK, thanks for anyone who looked. I've pretty much managed to sort this out now. I've replaced the jQuery block containing mouseover and mouseout with:

好的,谢谢任何看过的人。我现在已经设法解决了这个问题。我用以下代码替换了包含mouseover和mouseout的jQuery块:

$("#nav li.nav-parent").hover(
function () { 
$(this).children('.nav-child').stop(true,true).slideDown(1000).removeClass("display-list"); // fired on mouseover
},
function () {
$(this).children('.nav-child').slideUp(1000); // fired on mouseout
}
);

It's a little jerky if you run the cursor back and forth over it, but it at least works. I'd like to properly stop the animation queue if possible though.

如果你在它上面来回运行光标,它会有点生涩,但它至少有效。我想尽可能正确地停止动画队列。

#2

I would suggest to use the splendid accordion (with hover functionality) of jQuery UI: http://jqueryui.com/demos/accordion/#hoverintent

我建议使用jQuery UI的精彩手风琴(带悬停功能):http://jqueryui.com/demos/accordion/#hoverintent

#3

Not sure what all is on your page but this seemed to work with what code you supplied. It's late and not fully tested but give this a shot:

不确定页面上的内容是什么,但这似乎适用于您提供的代码。现在已经很晚了,没有经过全面测试,但是给出了一个镜头:

// When you hover over the link in the parent LI...
$('#nav li.nav-parent').mouseover( function() {
self = this;
// ...slide the sub-UL into view, and remove the 'display-list' class
$('#nav li.nav-parent').each(function(){if(self != this)$(this).children('.nav-child').slideUp(1000)});
$(this).children('.nav-child').slideDown(1000).removeClass("display-list");
});

Also make sure to get rid of your mouseout code

还要确保摆脱鼠标输出代码

#4

I know this is an old post, but I thought I would contribute for anyone else looking for help. You really should be using the .on() event handler instead of .hover() for new versions of jQuery. Here is an example from one I am using on a site...

我知道这是一个老帖子,但我想我会为寻求帮助的其他人做出贡献。你真的应该使用.on()事件处理程序而不是.hover()用于新版本的jQuery。以下是我在网站上使用的示例...

$('.leftnav-item:not(.active)').on({

    mouseenter: function() {
        $(this).find('.nav-sublock').stop(true,true).slideDown(500);
    },

    mouseleave: function() {
        $(this).find('.nav-sublock').slideUp(500);
    }

});