0

jqueryドロップダウンメニューがあり、うまく機能します。2つの要素をスライドさせる問題が1つだけありますが、ホバーした要素をドロップダウンしたいだけです。

ウェブサイトへのリンク：こちら

Jクエリ

$(document).ready(function () { 

        $('.sub_menu').hide(); //hiding the element

        $('.trigger').mouseenter(function() {
            $('.sub_menu').slideDown(350); 
        }).mouseleave(function() {
            $('.sub_menu').slideUp(350); 
        });   
});

HTML

<div id="nav">
            <ul class="main_menu">
                <li><a href="#">Home</a></li>
                <li class="trigger">
                    <a href="#">Hypotheken</a>
                    <ul class="sub_menu">
                        <li><a href="#">Hypotheekvormen</a></li>
                        <li><a href="#">Hyporheek rente</a></li>
                        <li><a href="#">Nationale hypotheek garantie</a></li>   
                    </ul>
                    <div class="clear"></div>                       
                </li>
                <li><a href="#">Verzekeringen</a></li>
                <li class="trigger">
                    <a href="#">Downloads</a>
                    <ul class="sub_menu">
                        <li><a href="#">Hypotheekvormen</a></li>
                        <li><a href="#">Hyporheek rente</a></li>
                        <li><a href="#">Nationale hypotheek garantie</a></li>   
                    </ul>
                </li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div><!-- nav -->
4

1 に答える 1

0

これを試して

$(document).ready(function () { 

        $('.sub_menu').hide(); //hiding the element

        $('.trigger').mouseenter(function() {
            $(this).children('.sub_menu').slideDown(350); 
        }).mouseleave(function() {
            $(this).children('.sub_menu').slideUp(350); 
        });   
});

あなたのコードでは、メニュー項目の上にマウスを移動すると、クラスを持つすべての要素.sub_menuが選択され、アニメーション化されます。ただし、現在の子だけが必要です。

于 2012-07-04T23:10:33.547 に答える