WordPress移动端下拉菜单：点击箭头展开子菜单的jQuery问题

第二段代码失效的核心原因 #

• DOM定位逻辑缺陷：你用$(this).siblings(".sub-menu")尝试选中子菜单，但实际项目中可能存在DOM层级偏差——哪怕当前简化HTML里.arrow和.sub-menu是同级，若箭头被其他元素包裹（比如WordPress主题自动添加的额外标签），这个选择器就会找不到目标元素。
• 箭头元素无点击区域：.arrow是空<span>标签，若未通过CSS设置宽高和cursor: pointer，它本身是不可点击的，用户点击的其实是父元素<li>的空白区域，导致箭头的点击事件根本无法触发。
• jQuery冲突（WordPress常见问题）：WordPress默认启用jQuery的noConflict模式，$别名不可用，直接用$会导致代码无法执行。

修正后的可执行代码 #

jQuery(function ($) {
    // 初始化隐藏子菜单
    $(".menu-mobile__nav .sub-menu").hide();

    // 绑定箭头点击事件
    $(".menu-mobile__nav .menu-item-has-children .arrow").click(function (e) {
        // 阻止事件冒泡，避免触发父元素的点击行为
        e.stopPropagation();
        // 稳定定位到当前菜单下的子菜单
        $(this).closest(".menu-item-has-children").find(".sub-menu").slideToggle();
    });

    // 可选：点击父链接时阻止跳转（若不需要父链接跳转）
    $(".menu-mobile__nav .menu-item-has-children > a").click(function (e) {
        e.preventDefault();
    });
});

必须补充的CSS修复 #

给箭头添加可点击区域和视觉样式：

.menu-mobile__nav .menu-item-has-children .arrow {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    cursor: pointer;
    position: relative;
}

/* 示例箭头图标样式 */
.menu-mobile__nav .menu-item-has-children .arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
}

关键优化说明 #

• 用closest(".menu-item-has-children")替代siblings，能无视DOM层级小变动，稳定定位父菜单元素。
• 添加e.stopPropagation()避免点击箭头时触发父元素的其他绑定事件。
• 用jQuery(function ($) {...})的写法，既解决了WordPress的jQuery冲突，又能在函数内正常使用$别名。

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