jquery - 我无法让子菜单的其余部分正确显示

Question

我有这个带有 ul 子菜单的菜单，而我编写的脚本只能显示第一个子菜单，而另一个不显示。

这是我正在使用的 jquery 脚本

$(document).ready(function(){
     $('#top_menu_blockx').hover(
        function(){
            $('#top_menu_blockx').children('ul').stop().fadeIn('slow');
        },
        function(){
            $('#top_menu_blockx').children('ul').stop().fadeOut('slow');
        }
     );
});

我已经包含了一个链接到他的 jsfiddle。 http://jsfiddle.net/kakashi807/RrYs4/2/

顺便说一句，为什么鼠标悬停时子菜单的字体颜色不会变成白色？

谢谢你

Answer 1

试试这个 -演示

$(document).ready(function(){
     $('.top_menu_btnx').hover(
        function(){
            $(this).children('ul').stop().fadeIn('slow');
        },
        function(){
            $(this).children('ul').stop().fadeOut('slow');
        }
     );
});

关于您的 HTML - ID-s 应该是唯一的！

Answer 2

尝试相同的事情ClassName。然后它将起作用。

小提琴示例：http: //jsfiddle.net/RrYs4/6/

查询：

$(document).ready(function(){
     $('.top_menu_btnx').hover(
        function(){
            $(this).children('ul').stop().fadeIn('slow');
        },
        function(){
            $(this).children('ul').stop().fadeOut('slow');
        }
     );
});