带有JS的导航(双重打开）

Nav with JS (double open)

本文关键字：JS 导航 带有      更新时间：2024-06-04

我的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').hide();

我编辑了你的代码以简化它：

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

实例

相关文章：