javascript - 用JS导航(双重打开)

我的JS代码有问题，此代码与megamenu一起激活了一个div，但我可以同时打开2个megamenu，我需要在我已经单击了当前megamenu后第二次消失。你有主意吗？

$(function() {

  var menuVisible = false;

  $('.contentLink').click(function() {

        var office = $(this).attr('data-office');

        if (menuVisible) {
            $('#_' + office).hide();
            $(this).removeClass('on');
            menuVisible = false;
            return;
        }
        else
        {
            $('#_' + office).show();
            $(this).addClass('on');
            menuVisible = true;
        }

    });

});

<nav>
    <ul class="menu-links">
        <li><a data-office="events" class="contentLink">Events</a>
            <div class="megamenu center" id="_events">
                My mega menu events
            </div>
        </li>
        <li><a data-office="articles" class="contentLink">Articles</a>
            <div class="megamenu center" id="_articles">
                My mega menu articles
            </div>
        </li>
    </ul>
</nav>

最佳答案

是的，在您的click()函数上添加以下行以隐藏所有megamenu：

$('.megamenu').hide();

我已经编辑您的代码以简化它：

$(function() {
  $('.contentLink').click(function() {
        $('.megamenu').hide();
        menu = $(this).next();
        if(menu.is(':visible')){
           menu.hide();
        }else{
           menu.show();
        }
    });
});

Live example