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()您只搜索相对于您悬停的列表的列表。

Answer 2

使用此选择器：$('[id^="menu-item"]')对ID开头menu-item的所有项目采取行动。

在您的函数中，它将是$('.sub-menu',this)

jQuery('[id^="menu-item"]').hover(
    function() {
        jQuery('.sub-menu',this).show(); // <--- this selects .sub-menu with parent of menu-item it is reffering to.
    },
    function() {
        jQuery('.sub-menu',this).hide();
    }
);

Answer 3

如果你真的需要根据id找到每个元素，那么将它们放在逗号分隔的字符串中，如下所示

＆＃13;

menuitems = "#menu-item-11215, #menu-item-11233";
jQuery( menuitems ).hover(
          function(){
              $(this).children(".sub-menu").show();
          },
          function(){
              $(this).children(".sub-menu").hide();
          }
        );

＆＃13;

我已经使用过.children，因为它应该比.find更快，但它只会搜索菜单项的直接孩子而不会更深入。

Answer 4

有许多方法可以重构此代码以减少重复。它们中的大多数与jQuery无关，而是与JavaScript语言本身无关。例如：

var itemNumbers = [
    "11215",
    "11233",
    "11211",
    "11268",
    "11243",
    "11239"
];

for(var i=0; i<itemNumbers.length; i++){
    var menuItem = jQuery("#menu-item-" + itemNumbers[i]);
    var subMenu = menuItem.find(".sub-menu");
    menuItem.hover(subMenu.show, subMenu.hide);
}

或：

var itemNumbers = [
    "11215",
    "11233",
    "11211",
    "11268",
    "11243",
    "11239"
];

var menuItems = $();
for(var i=0; i<itemNumbers.length; i++){
    menuItems = menuItems.add("#menu-item-" + itemNumbers[i]);
}

menuItems.hover(
    function(){
        $(this).find(".sub-menu").show();
    },
    function(){
        $(this).find(".sub-menu").hide();
    }
});

Answer 5

然后只传入elm中的元素以及show或hide

的集合

   function MyToggle(elm,set){
      if(set=="show"){
        $(elm+' .sub-menu').show();
      }else{//hide
        $(elm+' .sub-menu').hide();
      }
    }

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

5 个答案: