使用 jQuery 和 html5 制作子菜单

Question

我想用 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。我想。如果你有一个 hovert li 项目。然后出现子菜单。当你离开子菜单时。然后仍然保持300ms。但是我应该如何使用 jQuery 呢？

非常感谢您的帮助！

Answer 1

试试超级鱼 http://users.tpg.com.au/j_birch/plugins/superfish/#examples

它有延迟，你可以使用 hoverintent

Answer 2

你可以试试这个：

$(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();
    });
});

Here's a fiddle 表明它工作正常。