优化jquery悬停菜单

Question

我有这些菜单项：

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

我有这个jQuery代码：

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

如何优化此代码以适用于所有mainMenuItem元素？在mainMenuItem悬停时，我希望每个菜单项都有相同的内容。

Answer 1

您可以单独使用CSS：

＆＃13;

＆＃13;

<iframe src="another.html"></iframe>

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;