如何简化megamenu这段jQuery代码？

Question

嗨，我正在试着简化这段代码，但是不知道该怎么做，有什么想法吗？它实际上是一个百万级的

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

Answer 1

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

Answer 2

首先，您可以合并css调用

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

Answer 3

像这样的东西？

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