javascript - Nav with JS(双开)

Question

我的 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>

Answer 1

是的，在您的 click() 函数中添加这一行以隐藏之前的所有 megamenu:

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

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

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

Live example