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 はユニークでなければなりません!

Answer 2

そのことで同じことを試してみてくださいClassName。その後、それは動作します。

フィドルの例： http： //jsfiddle.net/RrYs4/6/

JQuery：

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