如何实现点击触发的下拉菜单松开鼠标后保持开启，仅再次点击时关闭

你现在遇到的“按住鼠标才展开、松鼠标就自动关”的表现，根本不是JS的toggle逻辑写坏了，是新旧触发逻辑的冲突导致的：

• 你当初迁移交互逻辑的时候，只改了JS的触发事件，没把CSS里原来绑定hover状态的子菜单展开规则完全清掉，现在菜单的展开视觉效果实际是靠“鼠标按住时元素处于hover状态”撑着的，JS里加的dropdown-open类要么优先级太低压不过旧的hover规则，要么根本没匹配上CSS选择器
• 一旦鼠标松开，元素的hover状态消失，旧的CSS规则就会把子菜单重新隐藏，看起来就像是“点了能展开，松手就收回去”

1. 先修正CSS的双触发冲突 #

把所有残留的旧hover展开规则全部删掉，不要同时留两套触发逻辑：
比如找到CSS里类似下面的旧规则，直接移除：

/* 这类就是需要删掉的旧hover触发规则 */
.main-navigation li:hover > .sub-menu {
  display: block;
  opacity: 1;
}

替换成只和JS控制的dropdown-open类绑定的规则，确保选择器权重足够：

/* 仅靠类控制展开状态，和JS逻辑完全匹配 */
.main-navigation ul.menu > li.menu-item-has-children.dropdown-open > .sub-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}

这一步做完你就能发现，哪怕你鼠标不按了，只要dropdown-open类在元素上，菜单就会保持展开状态，不会再跟着hover状态消失。

2. 优化JS逻辑补全交互细节 #

你现有的toggle逻辑本身是对的，只需要补几个细节避免状态被异常干扰：

• 阻止点击事件冒泡，避免触发页面其他区域的全局关闭逻辑
• 点击当前展开项时，自动收起其他同层级已经打开的子菜单，避免多菜单同时展开的混乱状态
  调整后的完整代码：

$(document).ready(function () {
    // 全宽导航项的遮罩逻辑
    $('header li.full-width').click(function () {
        $('.site-content').toggleClass('overlay');
    });

    // 移动端子菜单切换逻辑
    $('body .main-navigation ul.menu > li.menu-item-has-children > .caret').on('click', function (e) {
        // 阻止默认行为和事件冒泡，避免误触发其他逻辑
        e.preventDefault();
        e.stopPropagation();
        // 获取当前触发项对应的父级菜单li
        const $currentItem = $(this).closest('li');
        // 收起同层级其他已展开的菜单
        $currentItem.siblings('.dropdown-open').removeClass('dropdown-open');
        // 切换当前菜单的展开/收起状态
        $currentItem.toggleClass('dropdown-open');
    });

    // 补充通用交互：点击页面非菜单区域时，自动收起所有展开的菜单和遮罩
    $(document).on('click', function () {
        $('.main-navigation .dropdown-open').removeClass('dropdown-open');
        $('.site-content').removeClass('overlay');
    });
});

快速排查剩余问题的小技巧 #

调整完如果还有异常，可以对着这几点快速定位：

• 打开浏览器开发者工具，在菜单展开状态下检查元素的class列表，确认dropdown-open类是不是真的被加上了，有没有被其他脚本在鼠标松开时自动移除
• 查看子菜单元素的Computed样式面板，确认控制显示/隐藏的规则到底是来自旧的hover选择器，还是你新加的类选择器，如果是旧规则的影响，直接调高类选择器的权重或者删掉旧规则即可
• 如果是用的第三方主题自带导航，要检查主题内置脚本里有没有默认绑定的hover展开逻辑，和你自己写的click逻辑冲突的话，禁用主题的对应默认触发即可

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