Pollate模板下拉菜单BUG：点击其他菜单图标未关闭已打开菜单

我来帮你解决这个投票系统下拉菜单的BUG问题，核心是要处理点击新菜单时自动关闭其他已打开菜单的逻辑，同时保留当前项的切换功能：

问题分析 #

现有代码的核心缺陷在于：点击新菜单图标时，只会切换当前菜单的状态，没有先关闭其他已打开的菜单；同时你之前的尝试错误地直接关闭了所有菜单（包括当前点击项），导致菜单无法正常展开。另外，菜单点击事件会冒泡到页面元素，可能导致刚打开的菜单被立刻关闭。

原始代码参考 #

HTML结构

<div class="pl-options"> 
  <a href="#" class="pl-user-options"></a> 
  <ul class="dropdown"></ul> 
</div>
<div class="pl-options"> 
  <a href="#" class="pl-user-options"></a> 
  <ul class="dropdown"></ul> 
</div>

现有jQuery代码

$.puerto_droped = function( prtclick, prtlist = "ul.dropdown" ){
    $(prtclick).livequery('click', function(){
        var ul = $(this).parent();
        if( ul.find(prtlist).hasClass('open') ){
            ul.find(prtlist).removeClass('open');
            $(this).removeClass('active');
            if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
        } else {
            ul.find(prtlist).addClass('open');
            $(this).addClass('active');
            if(prtclick == ".pl-mobile-menu") $('body').addClass('active');
        }
        return false;
    });
    $("html, body").livequery('click', function(){
        $(prtclick).parent().find(prtlist).removeClass('open');
        $(prtclick).removeClass('active');
        if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
    });
}

修改后的完整代码 #

$.puerto_droped = function( prtclick, prtlist = "ul.dropdown" ){
    $(prtclick).livequery('click', function(evt){
        // 阻止事件冒泡到html/body，避免刚打开菜单就被关闭
        evt.stopPropagation();
        
        const $currentBtn = $(this);
        const $currentDropdown = $currentBtn.parent().find(prtlist);
        const isCurrentOpen = $currentDropdown.hasClass('open');

        // 第一步：关闭所有其他已打开的菜单和激活状态（排除当前点击的按钮）
        $(prtclick).not($currentBtn).removeClass('active');
        $(prtclick).not($currentBtn).parent().find(prtlist).removeClass('open');

        // 第二步：处理当前菜单的切换逻辑
        if(isCurrentOpen){
            $currentDropdown.removeClass('open');
            $currentBtn.removeClass('active');
            if(prtclick === ".pl-mobile-menu") $('body').removeClass('active');
        } else {
            $currentDropdown.addClass('open');
            $currentBtn.addClass('active');
            if(prtclick === ".pl-mobile-menu") $('body').addClass('active');
        }
        return false;
    });

    $("html, body").livequery('click', function(){
        // 点击页面空白区域时，关闭所有菜单
        $(prtclick).removeClass('active');
        $(prtclick).parent().find(prtlist).removeClass('open');
        if(prtclick === ".pl-mobile-menu") $('body').removeClass('active');
    });
}

关键修改说明 #

• evt.stopPropagation()：阻止菜单点击事件向上冒泡到html/body，避免触发空白区域的关闭逻辑，保证当前菜单能正常完成展开/收起操作。
• .not($currentBtn)：在关闭其他菜单时，明确排除当前点击的按钮，这样只会关闭已经打开的其他菜单，不影响当前项的状态切换。
• 保留原有的空白区域关闭逻辑：确保用户点击页面其他地方时，所有菜单都会关闭，符合常规交互习惯。

验证效果 #

现在测试一下交互流程：

1. 点击第一个菜单图标，菜单正常展开
2. 点击第二个菜单图标，第一个菜单自动关闭，第二个菜单展开
3. 点击页面空白区域，所有菜单都关闭
4. 点击已展开的菜单图标，菜单会收起

这样就完美解决了多菜单同时展开的BUG，同时保留了所有原有交互逻辑。

内容的提问来源于stack exchange，提问作者Infinity