javascript - jQueryはホバー時にサブメニューを表示し、サブメニューが存在する場合はクラスを追加します

Question

jQueryを使用して、次のようにメニューliがホバーされたときにサブメニューを表示したい:

私の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');
    }
});