0

jQueryとjavascriptでサブメニューを作りたいです。私はこのhtml構造を持っています：

<nav class="container">
    <ul>
        <li><a href="#" title="Werken in de zorg">Werken in de zorg</a>
            <ul class="submenu">
                <li><a class="label" href="#" title="Lees meer over Werkvelden">Werkvelden</a></li>
                <li><a href="#" title="Lees meer over Eerstelijnzorg">Eerstelijnzorg</a></li>
                <li><a href="#" title="Lees meer over Geestelijke Gezondheidszorg">Geestelijke Gezondheidszorg</a></li>
                <li><a href="#" title="Lees meer over Gehandicaptenzorg">Gehandicaptenzorg</a></li>
            </ul>
        </li>
        <li><a href="#" title="Vacatures">Vacatures</a></li>
        <li><a href="#" title="Opleidingen en scholen">Opleidingen en scholen</a></li>
    </ul>
</nav>

CSSで、.submenuが何も表示しないように設定されています。しかし今はjavascriptです。をお願いします。あなたがhovertliアイテムを持っているならば。次に、サブメニューが表示されます。そして、サブメニューから移動するとき。それでも300msのままです。しかし、jQueryをどのように使用すればよいですか？

ご助力ありがとうございます！

4

2 に答える 2

1

これを試してみることができます：

$(document).ready(function() {
    $('nav.container').children('ul').children('li').hover(function() {
        if ($(this).find('.submenu').length > 0) {
            $(this).find('.submenu').slideToggle();
        }
    }, function() {
        $(this).find('.submenu').delay(300).slideToggle();
    });
});

これが機能していることを示すためのフィドルです。

于 2011-12-21T13:16:39.607 に答える
0

スーパーフィッシュをお試しください http://users.tpg.com.au/j_birch/plugins/superfish/#examples

遅延があり、ホバーインテントを使用できます

于 2012-12-13T16:02:22.723 に答える