我寫了一個用jquery的menu，但我覺得似乎可以簡寫，請問這段如何簡寫？

Question

$("#menu_sub,#menu_sub2,#menu_sub3").hide();$("#menu").mouseenter(function() {  $("#menu_sub2,#menu_sub3").slideUp();  $("#menu2,#menu3").css('color', '');  $("#menu_sub").slideDown();  $("#menu").css('color', '#46a9ff');});$("#menu2").mouseenter(function() {  $("#menu_sub,#menu_sub3").slideUp();  $("#menu,#menu3").css('color', '');  $("#menu_sub2").slideDown();  $("#menu2").css('color', '#46a9ff');});$("#menu3").mouseenter(function() {  $("#menu_sub,#menu_sub2").slideUp();  $("#menu,#menu2").css('color', '');  $("#menu_sub3").slideDown();  $("#menu3").css('color', '#46a9ff');});<div id="menu" class="menu">xxx</div><div id="menu_sub">  <div class="menu_sub">1</div>  <div class="menu_sub">2</div>  <div class="menu_sub">3</div></div><div id="menu2" class="menu">ddd</div><div id="menu_sub2">  <div class="menu_sub">1</div>  <div class="menu_sub">2</div>  <div class="menu_sub">3</div></div><div id="menu3" class="menu">aaa</div><div id="menu_sub3">  <div class="menu_sub">1</div>  <div class="menu_sub">2</div>  <div class="menu_sub">3</div></div>在jquery的部分，有辦法可以縮減程式碼但是達到一樣的效果嗎？

Answer 1

// 将数组内非指定下标的元素用 , 拼接

// 想起来 switch 好像是关键字不能作为函数名 改一下

var which = function(arr, index) {

    return arr.filter(function(item, _index) {

        return _index !== index;

    }).join(',');

}

var menus = ['#menu', '#menu2', '#menu3'];

var subs = ['#menu_sub', '#menu_sub2', '#menu_sub3'];

$(menus.join(',')).hide();

// 遍历菜单数组

menus.forEach(function(menu, index) {

    $(menu).mouseenter(function(){

        // 拼接非当前位置的所有子菜单并收起

        $(which(subs, index)).slideUp();

        // 拼接非当前的所有菜单并重置样式

        which(menus, index).css('color', '');

        // 展开当前位置的子菜单

        $(subs[index]).slideDown();

        // 重置选中菜单的样式

        menu.css('color', '#46a9ff');

    })

});

有简洁版的，不过不知道你会用 ES5/6 之类的不：

var which = (arr, index) => arr.filter(function(item, _index) => _index !== index).join(',');

var subs = ['#menu_sub', '#menu_sub2', '#menu_sub3'];

$(menus.join(',')).hide();

['#menu', '#menu2', '#menu3'].forEach((menu, index, menus) => {

    $(menu).mouseenter(() => {

        $(which(subs, index)).slideUp();

        which(menus, index).css('color', '');

        $(subs[index]).slideDown();

        menu.css('color', '#46a9ff');

    })

});