jQuery悬停菜单嵌入列表项

我有一个看起来像这样的菜单 - 不是我的选择的格式，它会自动从WordPress的产生：

CSS

.menu_body { 
    display: none; 
}

HTML

<ul id="menu-list"> 
    <li class="menu_head"><a href="#">Header-1</a></li> 
    <li class="menu_head"><a href="#">Header-2</a> 
    <ul class="menu_body"> 
     <li><a href="#">Link-1</a></li> 
     <li><a href="#">Link-2</a></li> 
    </ul> 
    </li> 
    <li class="menu_head"><a href="#">Header-3</a> 
    <ul class="menu_body"> 
     <li><a href="#">Link-3</a></li> 
     <li><a href="#">Link-4</a></li> 
    </ul> 
    </li> 
    <li class="menu_head"><a href="#">Header-4</a></li> 
</ul>

我想要做的是编写一个基于jQuery悬停的函数，将鼠标悬停在类menu_head的项目上时，会显示其下的类“menu_body”中的项目。

从其他地方我拿起了这样的想法，它使用一个功能，将打开一个菜单和关闭所有其他因为它这样做是整齐和整洁的想法。这将是这个样子：

$("#menu-list li.menu_head").mouseover(function() 
{ 
$(this).children('.menu_body').slideDown(500).siblings(".menu_body").slideUp("slow"); 

});

这并不工作，但你可以看到我想要做的事情 - 得到的第一个相关的“menu_body”项并将其向下滑动，然后让所有其他“ menu_body'项目并将其滑动。

你可以看到这与这里的DIV一个例子（这是我偷的想法）：

Example link

但巨大的努力，以使其与嵌套div的工作。

有人可以建议我需要做什么，并解释所以我可以理解我做错了什么？

干杯，

马特

来源

2012-11-13 Matt Thrower

尝试像这样 - DEMO

$("#menu-list li.menu_head").mouseover(function() { 
    $(".menu_body").stop().slideUp("slow"); 
    $(this).children('.menu_body').delay(600).stop().slideDown(500); 
});

你.menu_body项目不兄弟姐妹彼此。

来源

2012-11-13 17:34:14

试过这个。它非常片状。不知道为什么，但菜单将停止一半的开放，然后拒绝打开，除非是页面刷新和其他古怪。 –

添加一个延迟的动画之间，就像这样：

$(this).children('.menu_body').slideDown(500).delay(500).siblings(".menu_body").slideUp("slow");

来源

2012-11-13 17:36:12 Nelson

我会建议使用一个鼠标悬停和鼠标离开。

$("#menu-list li.menu_head").mouseOver(function() { 
    $(this).children('.menu_body').slideDown(500); 
}); 
$("#menu-list li.menu_head").mouseLeave(function() { 
    $(this).children('.menu_body').stop().slideUp(500); 
});

否则，如果你不滚动到另一菜单元素，可以说对下面的内容，你的向上滑动有可能不能正确调用。

Example

来源

2012-11-13 17:42:01 AJak

不好：如果你以一种奇怪的方式将鼠标悬停在标题3上，假设你在标题2内，将鼠标悬停在标题3上并在标题2完全折叠之前返回到标题2的子项，则会出现循环行为。它的可能性很小，但我实际上意外地发现了它。 – Cimbali

应该只需要添加一个stop（），这似乎解决了这个问题。当时没有想到这一点，很好的捕捉。 – AJak

添加停止在哪里？我已经实现了这一点，它似乎工作得很好，但我认为我继续捕捉提到的行为。还有几个滚动后，整个事情似乎锁定:( –

马特，请尝试使用defereds。

类似以下内容可能有助于作为起始块。

$.when($('div').animate({"opacity": "0"}, 1000)).done(function(){ 
    // divs hidden, run code to show them 
    $('div').animate({"opacity": "100"}, 1000) 
});

来源

2012-11-14 12:49:03

jQuery悬停菜单嵌入列表项

回答

相关问题