第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決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的部分，有辦法可以縮減程式碼但是達(dá)到一樣的效果嗎？
查看完整描述

3 回答

?
慕俠2389804

TA貢獻(xiàn)1719條經(jīng)驗(yàn) 獲得超6個贊

// 將數(shù)組內(nèi)非指定下標(biāo)的元素用 , 拼接

// 想起來 switch 好像是關(guān)鍵字不能作為函數(shù)名 改一下

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();


// 遍歷菜單數(shù)組

menus.forEach(function(menu, index) {

    $(menu).mouseenter(function(){

        // 拼接非當(dāng)前位置的所有子菜單并收起

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

        // 拼接非當(dāng)前的所有菜單并重置樣式

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

        // 展開當(dāng)前位置的子菜單

        $(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');

    })

});


查看完整回答
反對 回復(fù) 2019-03-19
  • 3 回答
  • 0 關(guān)注
  • 442 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號