2

if i make a hover over my menulinks currently all submenues which are on the first level will be shown i dont know whats wrong, see my code:

    $('#menu li').hover(function () {
        //show its submenu
        $('ul', this).slideDown(100);

    }, function () {
        //hide its submenu
        $('ul', this).slideUp(100);
    });

so in my opinion it must work very well because a hover over a link should only display this first submenu. But also the submenu of this first link will show directly by a hover and i dont know how to fix it better than yet.

need some help please.

For a better understanging i hve created a fiddle here.

4

4 回答 4

7

悬停功能中的选择器正在查找ul作为元素后代的所有li元素。您只想显示直接子代。试试这个：

$('#menu li').hover(function() {
    //show its submenu
    $(this).children('ul').slideDown(100);

}, function() {
    //hide its submenu
    $(this).children('ul').slideUp(100);
});
于 2013-05-08T13:00:42.527 回答
0

<ul>包含您的子菜单的也包含子子菜单。因此，如果您显示第一个列表，它还会自动显示该列表中包含的所有元素。

于 2013-05-08T13:02:48.467 回答
0

您应该ul为不同级别的菜单使用不同的类来分隔不同级别的子菜单。

如果您只想更改您的代码，您可能想尝试此更改：

//show its submenu
$('ul', this).eq(0).slideDown(100);
于 2013-05-08T13:05:53.660 回答
0

您需要指定要显示的列表。$(this)用作上下文查找<ul>内部，然后使用伪选择器过滤结果:first。

hoverIn为和事件尝试这样的hoverOut事情：

$("#menu").on('hover', 'li', function(e){
    // $(this) refers to the <li> being hovered
    $(this).find('ul:first').slideToggle(100);
});

请参阅文档on()和slideToggle()方法。

于 2013-05-08T13:05:57.107 回答