如何简化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代码？

回答

相关问题