用jQuery和html5制作一个子菜单

Make a submenu with jQuery and html5

本文关键字：一个 菜单 jQuery html5      更新时间：2023-09-26

我想用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项目。然后出现子菜单。当你从子菜单中。那么仍然是300毫秒。但是我应该如何使用jQuery呢?

非常感谢你的帮助!

你可以试试:

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

这里有一个小提琴来显示它的工作

试试超级鱼http://users.tpg.com.au/j_birch/plugins/superfish/示例

有一个延迟你可以使用hoverintent

相关文章：