我寫了一個用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

`$("#menu_sub,#menu_sub2,#menu_sub3").hide();
$(".menu").mouseenter(function(event) {

 $(this).css('color', '#46a9ff').next().slideDown();
 $(this).siblings('.menu').css('color', '').next().slideUp();

});`
这个建议你先熟悉下jq基础，你会发觉写起来会很简单。

Answer 2

// 将数组内非指定下标的元素用 , 拼接
// 想起来 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');
    })
});

Answer 3

$("#menu_sub,#menu_sub2,#menu_sub3").hide();

$(".menu").mouseenter(function() {
  $(".menu").css('color', '').next().slideUp();
  $(this).css('color', '#46a9ff').next().slideDown();
});

Answer 4

你这个，tab切换吗？