jQuery中点击触发slideToggle折叠子菜单报错问题求助

错误原因 #

你遇到的报错是因为find('.block-navigation-submenu')会同时匹配当前点击的父级<li>元素（它本身也带有block-navigation-submenu类）和子菜单的<ul>元素。而<li>元素并非你要折叠的目标，且链式调用中混入无效元素后，slideToggle()无法正常执行。

另外原代码的DOM遍历逻辑冗余，多次parent()不如直接定位父元素清晰。

修正后的代码 #

$("#sidebar-navigation li.block-navigation-submenu > a > em").on('click', function(e) {
    e.preventDefault();   
    // 直接定位到包含当前点击元素的父级li
    const $parentLi = $(this).closest('li.block-navigation-submenu');
    $parentLi.addClass('testing-1');
    // 精准选择父li下的直接子ul菜单，避免选中父li本身
    const $subMenu = $parentLi.children('ul.block-navigation-submenu');
    $subMenu.addClass('testing-2').slideToggle();
});

关键改进点 #

• 用closest('li.block-navigation-submenu')直接定位目标父li，比多次parent()更可靠、可读性更强。
• 用children('ul.block-navigation-submenu')精准筛选子菜单ul，排除父li的干扰，确保slideToggle()只作用在需要折叠的菜单上。
• 拆分链式调用为变量存储，逻辑更清晰，便于后续维护。

额外优化（可选） #

如果需要切换菜单的展开/折叠状态（比如移除testing-1/testing-2类），可以改用toggleClass()：

$("#sidebar-navigation li.block-navigation-submenu > a > em").on('click', function(e) {
    e.preventDefault();   
    const $parentLi = $(this).closest('li.block-navigation-submenu');
    $parentLi.toggleClass('testing-1');
    const $subMenu = $parentLi.children('ul.block-navigation-submenu');
    $subMenu.toggleClass('testing-2').slideToggle();
});

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