javascript - jQuery在悬停时显示子菜单并在子菜单存在时添加类

Question

使用 jQuery，我想在菜单 li 悬停时显示子菜单，这样：当 .nav 有 ul.submenu 并且 .nav li 悬停时，显示 .submenu 并添加类 .arrow-down，然后在鼠标上再次隐藏它。

我的HTML如下：

        <ul class="nav">
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">Facilities</a>
                <ul class="submenu">
                    <li><a href="#">Coaching</a></li>
                    <li><a href="#">Performance Tests</a></li>
                </ul>
            </li>
            <li><a href="#">Trainers</a>
                <ul class="submenu">
                    <li><a href="#">Coaching</a></li>
                    <li><a href="#">Performance Tests</a></li>
                </ul>
            </li>
            <li><a href="#">Membership</a>
                <ul class="submenu">
                    <li><a href="#">Coaching</a></li>
                    <li><a href="#">Performance Tests</a></li>
                </ul>
            </li>
            <li><a href="#">Schedule</a>
                <ul class="submenu">
                    <li><a href="#">Coaching</a></li>
                    <li><a href="#">Performance Tests</a></li>
                </ul>
            </li>
        </ul>

谢谢...

Answer 1

$('ul.nav > li').hover(function () {
    if ($(this).find('ul.submenu').length > 0) {
        $(this).find('ul.submenu').show();
        $(this).addClass('arrow-down');
    }
},
function () {
    if ($(this).find('ul.submenu').length > 0) {
        $(this).find('ul.submenu').hide();
        $(this).removeClass('arrow-down');
    }
});