2

我正在尝试创建具有以下属性的手风琴导航菜单：

将鼠标悬停在父 LI 上，其子菜单会向下滑动。如果您将鼠标向下悬停在子菜单上，它会按照您的预期保持打开状态。

如果您将光标从父链接或子菜单上移开，子菜单会再次向上滑动。

我以为我快要接近了——我可以让子菜单滑下，但是当我将鼠标悬停在它上面时，我不得不将鼠标悬停在父 LI 上，从而触发了上滑。我只是不知道如何让它做我需要的！

这是我的脚本：

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

这是我的 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 -->

我真的很感激任何帮助，拜托！

4

4 回答 4

1

好的，感谢任何看过的人。我现在几乎设法解决了这个问题。我已将包含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
}
);

如果您在它上面来回运行光标，这会有点生涩，但它至少可以工作。如果可能的话，我想正确地停止动画队列。

于 2010-03-30T08:58:31.397 回答
1

我建议使用 jQuery UI 的出色手风琴（具有悬停功能）：http: //jqueryui.com/demos/accordion/#hoverintent

于 2010-09-01T17:44:19.133 回答
0

不确定您页面上的所有内容，但这似乎适用于您提供的代码。已经很晚了，还没有完全测试，但试一试：

// 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");
});

还要确保摆脱你的 mouseout 代码

于 2010-03-30T08:25:20.847 回答
0

我知道这是一篇旧帖子，但我想我会为其他寻求帮助的人做出贡献。对于新版本的 jQuery，您确实应该使用 .on() 事件处理程序而不是 .hover() 。这是我在网站上使用的示例...

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

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

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

});
于 2014-10-16T16:42:47.070 回答