0

wordpressのドロップダウンメニューにアニメーションを追加しようとしています。私はこのコードを使用しています：

jQuery(function() {
    jQuery("ul#menu-menu-1").hover(function() {
        jQuery(this).find('ul.sub-menu')
            .stop(true, true).delay(50).animate({ "height": "show", "opacity": "show" }, 200 );
    }, function(){
        jQuery(this).find('ul.sub-menu')
            .stop(true, true).delay(50).animate({ "height": "hide", "opacity": "hide" }, 200 );
    });

});

しかし、1) すでに「所定の位置にある」サブメニューが ON になり、2) 最初の親のサブメニューが代わりに 2 番目の親のサブメニューになります...

4

1 に答える 1

1

セレクターはナビゲーション メニュー全体であり、メニューの任意の部分にマウスを合わせるとすべてのサブメニューが表示されます。

代わりに、メニュー内のjQuery("ul#menu-menu-1 li").hover(function() {個々の要素を選択する which を使用してみてください。li

次に、ホバーされているメニュー項目の直接の子である要素をターゲットにするために、 as.childrenの代わりに使用します。.findli

jQuery(function() {
    jQuery("ul#menu-menu-1 li").hover(function() {
        jQuery(this).children('ul.sub-menu')
            .stop(true, true).delay(50).animate({ "height": "show", "opacity": "show" }, 200 );
    }, function(){
        jQuery(this).children('ul.sub-menu')
            .stop(true, true).delay(50).animate({ "height": "hide", "opacity": "hide" }, 200 );
    });
});

アニメーションを表示するには、styles.css near line 906

ul.nav-menu li:hover > ul, .nav-menu ul li:hover > ul {
    display: block;
}
于 2013-09-30T22:37:10.353 に答える