CODEWITHSUNDEEP
javascriptjqueryhtml
Alex Zahir
Alex Zahir

Reputation: 969

jQuery show submenu on hover and add class if submenu exists

Using jQuery, I want to show submenu when menu li is hovered such that: when .nav has a ul.submenu and .nav li is hovered, show .submenu and add class .arrow-down, and onmouse out hide it again.

My HTML is as follows: 

        <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>

Thanks...

Upvotes: 0

Views: 4561

Answers (1)

AlliterativeAlice
AlliterativeAlice

Reputation: 12577

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

Upvotes: 3

Related Questions