使用jQuery实现点击菜单项仅打开对应子菜单的问题求助

问题原因 #

你当前代码的核心问题是$('.submenu')为全局选择器，会匹配页面内所有子菜单元素，因此任意菜单项点击都会触发所有子菜单同时切换状态。

修复代码 #

CSS修改 #

给子菜单增加默认隐藏的样式，初始状态下子菜单不展示：

ul.submenu {
    position: relative;
    display: none; /* 新增默认隐藏规则 */
}
.menuitem li{
    position: relative;
}
.submenu li{
    position: relative;
}

JavaScript修改 #

调整事件绑定逻辑和选择器范围：

$(document).ready(function () {
    // 仅给一级菜单项绑定点击事件
    $(".menuitem > li").click(function(e){
        // 仅切换当前点击项的子菜单，加stop避免快速点击时动画累积
        $(this).children('.submenu').stop().slideToggle();
        // 可选优化：点击当前项时收起其他已展开的子菜单，符合常规菜单交互逻辑
        $(this).siblings().children('.submenu').stop().slideUp();
    });
    // 阻止子菜单点击事件冒泡，避免点击子菜单内容时误触发父级的切换逻辑
    $(".submenu").click(function(e){
        e.stopPropagation();
    });
});

核心改动说明 #

• 调整选择器范围：将.menuitem li改为.menuitem > li，仅一级菜单项会触发点击事件，避免子菜单内的li元素误触发逻辑
• 限定操作范围：通过$(this)指代当前被点击的菜单项，用children('.submenu')仅选中当前项内部的子菜单，不会影响其他菜单
• 增加交互优化：新增事件冒泡阻止、动画防累积、同组菜单互斥展开的逻辑，使用体验更符合预期

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