如何用CSS实现点击下拉菜单子项保持可见且切换时自动收起

目前CSS没有原生支持点击状态的排他性切换逻辑，所以仅需少量JS配合完成类的切换，核心显示逻辑全部由CSS控制，不会引入额外无关问题。

前置JS调整 #

先调整你现有JS的click事件逻辑，增加清除其他元素激活状态的逻辑，实现点击新菜单时自动关闭旧菜单：

function sfHoverJQ() {
    $(document).ready(function () {
        $("li").on({    
            mouseenter: function(evt) {
                $(this).addClass("sfhover");
            },
            mouseleave: function(evt) {
                $(this).removeClass("sfhover");
                // 如果需要鼠标移走后点击激活的菜单仍然保持可见，可删除下一行
                $(this).removeClass("sfclick");
            },
            click: function(evt) {
                // 清除所有li的激活状态，实现排他关闭
                $("li").removeClass("sfclick");
                $(this).removeClass("sfhover");
                $(this).addClass("sfclick");
                // 阻止事件冒泡，避免父级菜单同时被触发
                evt.stopPropagation();
            }
        });
    });
}

配套CSS规则 #

直接复用你现有hover的显示隐藏逻辑，给sfclick类增加对应的样式即可：

/* 点击主菜单项后显示对应下拉菜单 */
#menubar li.sfclick .aMenu {
    left: auto;
}
/* 点击主菜单项后隐藏更深层级的次级子菜单 */
#menubar li.sfclick .aMenu .aMenu {
    left: -99999px;
}
/* 点击子菜单父项后显示对应的次级子菜单 */
#menubar .aMenu li.sfclick > .aMenu {
    left: auto;
}

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