如何簡化megamenu這個jQuery代碼？

嗨我試圖簡化這個代碼，但不能想出以哪種方式做到這一點，任何想法？它實際上是一個巨型大型如何簡化megamenu這個jQuery代碼？

$(function() { 
    $('#globalnavigation').find("a").bind({ 
     click: function() { 
      if (".submenu:hidden") { 
       $(".submenu").css("display", "block"); 
      } 
      if ($('a[href$="#a-menu"]')) { 
       $(this).addClass("active"); 
       $("#services-menu").css("display", "none"); 
       $("#innovations-menu").css("display", "none"); 
       $("#insights-menu").css("display", "none"); 
       $("#professionals-menu").fadeIn(750); 
      } 
      if ($('a[href$="#b-menu"]')) { 
       $(this).addClass("active"); 
       $("#professionals-menu").css("display", "none"); 
       $("#innovations-menu").css("display", "none"); 
       $("#insights-menu").css("display", "none"); 
       $("#services-menu").fadeIn(750); 
      } 
      if ($('a[href$="#c-menu"]')) { 
       $(this).addClass("active"); 
       $("#services-menu").css("display", "none"); 
       $("#innovations-menu").css("display", "none"); 
       $("#professionals-menu").css("display", "none"); 
       $("#insights-menu").fadeIn(750); 
      } 
      if ($('a[href$="#d-menu"]')) { 
       $(this).addClass("active"); 
       $("#services-menu").css("display", "none"); 
       $("#professionals-menu").css("display", "none"); 
       $("#insights-menu").css("display", "none"); 
       $("#innovations-menu").fadeIn(750); 
      } 
     } 
    }); 
});

來源

2011-05-11 ivordesign

你能顯示html嗎？一個生動的例子？ – 2011-05-11 13:06:45

你的HTML在哪裏？另外，對於這麼大的東西，考慮使用[jsFiddle]（http://jsfiddle.net/）來共享代碼;它可以讓其他人更容易地查看你想要做的事情。 – eykanal 2011-05-11 13:07:24

@ivodesign你也可以考慮縮進你的代碼 – Teneff 2011-05-11 13:12:36

CSS：

.submenu-content 
{ 
    display: none; 
}

HTML：

<nav id="globalnavigation">   
    <ul> 
     <li><a id="menu-item-a" href="#professionals-menu">Professionals</a></li> 
     <li><a id="menu-item-b" href="#services-menu">Services</a></li> 
     <li><a id="menu-item-c" href="#insights-menu">Insights</a></li> 
     <li><a id="menu-item-d" href="#innovation-menu">Innovation</a></li> 
    </ul> 
</nav> 

<section class="submenu" style="display: block;"> 
    ... 
    <div class="submenu-content" id="submenu-content-a"> 
    <div class="submenu-content" id="submenu-content-b"> 
    <div class="submenu-content" id="submenu-content-c"> 
    <div class="submenu-content" id="submenu-content-d"> 
    ... 
</section>

的JavaScript：

$('#globalnavigation').find("a").click(function() { 
     $(this).addClass("active");   
     $('.submenu').show(); 
     $('.submenu-content').hide(); 

     var id = $(this).attr('id').replace('menu-item-', ''); 
     $('#submenu-content-' + id).fadeIn(750); 
    });

來源

2011-05-11 13:21:41 Kon

讓我重新說明這個問題，我如何讓我的代碼更有效率？在enligh我想你會說...對於全局菜單中的每個鏈接我點擊，顯示相關的子菜單。但是另一個子菜單已經顯示出來了。那有意義嗎？ – ivordesign 2011-05-11 13:33:23

我更新了代碼。如果你有多個子菜單，那麼你可以先隱藏所有的子菜單（根據類名），然後顯示你想要的。這是僞代碼，但它應該讓你走上正軌。 – Kon 2011-05-11 13:40:01

好的，這個迴應太快了！幾乎正是我想要的，謝謝Kon，你是個天才！ – ivordesign 2011-05-11 13:40:17

下手，你可以鞏固你的CSS調用

$("#a-menu,#b-menu,#c-menu").css("display", "none"); 
$("#d-menu").fadeIn(750);

來源

2011-05-11 13:23:45 mcgrailm

這樣的事情？

formatMenus('a[href$="#a-menu"]'); 
formatMenus('a[href$="#b-menu"]'); 

function formatMenus(selector) 
{    
    if ($(selector)) 
    { 
     $(this).addClass("active"); 
     $("#services-menu").css("display", "none"); 
     $("#innovations-menu").css("display", "none"); 
     $("#insights-menu").css("display", "none"); 
     $("#professionals-menu").fadeIn(750); 
    } 
}

來源

2011-05-11 13:24:42

如何簡化megamenu這個jQuery代碼？

回答

相關問題