如何使我的JQuery代码适用于多个ID

Question

我有以下代码来显示和隐藏悬停上的菜单项:

jQuery( "#menu-item-11215" ).hover(
    function() {
        jQuery('#menu-item-11215 .sub-menu').show();
    },
    function() {
        jQuery('#menu-item-11215 .sub-menu').hide();
    }
);

jQuery( "#menu-item-11233" ).hover(
    function() {
        jQuery('#menu-item-11233 .sub-menu').show();
    },
    function() {
        jQuery('#menu-item-11233 .sub-menu').hide();
    }
);

jQuery( "#menu-item-11211" ).hover(
    function() {
        jQuery('#menu-item-11211 .sub-menu').show();
    },
    function() {
        jQuery('#menu-item-11211 .sub-menu').hide();
    }
);

jQuery( "#menu-item-11268" ).hover(
    function() {
        jQuery('#menu-item-11268 .sub-menu').show();
    },
    function() {
        jQuery('#menu-item-11268 .sub-menu').hide();
    }
);

jQuery( "#menu-item-11243" ).hover(
    function() {
        jQuery('#menu-item-11243 .sub-menu').show();
    },
    function() {
        jQuery('#menu-item-11243 .sub-menu').hide();
    }
);

jQuery( "#menu-item-11239" ).hover(
    function() {
        jQuery('#menu-item-11239 .sub-menu').show();
    },
    function() {
        jQuery('#menu-item-11239 .sub-menu').hide();
    }
);

而不是一遍又一遍地重复相同的代码,有没有办法触发JQuery为任何有孩子的ID工作？以下是其中一个相关的HTML代码.它们都以相同的方式设置:

<ul class="fusion-megamenu fusion-megamenu-row-2 fusion-megamenu-row-columns-1 fusion-megamenu-border">
    <li id="menu-item-11215" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-11215 fusion-megamenu-submenu fusion-megamenu-columns-1 col-lg-12 col-md-12 col-sm-12">
        <h3 class='fusion-megamenu-title'>
            <a href="http://someurl">Families &#038; Individuals</a>
        </h3>

        <ul class="sub-menu">
            <li id="menu-item-11275" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11275">
                <a href="http://someurl">
                    <span class="fusion-megamenu-bullet"></span>Tax &#038; Advisory
                </a>
            </li>
            <li id="menu-item-11277" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11277">
                <a href="http://someurl">
                    <span class="fusion-megamenu-bullet"></span>Trust &#038; Estates
                </a>
            </li>
        </ul>
    </li>
</ul>

知道每个孩子的父母都有一个ID,我可以选择要使用此代码显示和隐藏的孩子:

jQuery('#menu-item-11211 .sub-menu')

如何使这更通用以保存代码行？

Answer 1

减少你所拥有的一切:

jQuery( "ul.fusion-megamenu > li" ).hover(
    function(){
        jQuery(this).find('ul.sub-menu').show();
    },
    function(){
        jQuery(this).find('ul.sub-menu').hide();
    }
);

通过使用jQuery(this).find()您只搜索相对于您悬停的列表的列表.