优化菜单的jQuery悬停

Question

I have these menu items:

<li class="mainMenuItem menuTour">
    <a href="#">Tour</a>
    <div class="sub_nav closed" data-grid-id="sub_menu_stay">
        bla bla bla
    </div>
</li>
<li class="mainMenuItem">
    <a href="#">Offer</a>
    <div class="sub_nav closed" data-grid-id="sub_menu_stay">
        bla bla bla
    </div>
</li>
<!-- more repeated here... -->

I have this jQuery code:

$('.menuTour').mouseenter( function(){
    $('.menuTour > div').removeClass('closed').addClass('open');
}).mouseleave( function(){
    $('.menuTour > div').removeClass('open').addClass('closed');
});

How can I optimize this code to work for all mainMenuItem elements? On mainMenuItem hover I want the same thing for every menu item.

Answer 1

You can do this in CSS alone:

 .mainMenuItem:hover div { display: block; } .mainMenuItem div { display: none; } 

 <ul> <li class="mainMenuItem menuTour"> <a href="#">Tour</a> <div class="sub_nav" data-grid-id="sub_menu_stay"> bla bla bla </div> </li> <li class="mainMenuItem"> <a href="#">Offer</a> <div class="sub_nav" data-grid-id="sub_menu_stay"> bla bla bla </div> </li> <ul>