亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

牛魔王的故事 2019-03-15 14:07:54
$("#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的部分,有辦法可以縮減程式碼但是達到一樣的效果嗎?
查看完整描述

3 回答

?
慕俠2389804

TA貢獻1719條經驗 獲得超6個贊

// 將數組內非指定下標的元素用 , 拼接

// 想起來 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');

    })

});


查看完整回答
反對 回復 2019-03-19
  • 3 回答
  • 0 關注
  • 446 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號