动态创建同class子菜单无法显示？求助问题原因与解决方法

核心问题总结 #

1. Async函数未执行：你定义的异步匿名函数仅做了声明，没有添加()触发执行，导致内部的AJAX请求、元素创建逻辑完全没有运行（若你控制台显示元素已创建，大概率是代码笔误，但提供的代码里确实缺失执行调用）。
2. 元素插入节点不精准：使用document.getElementsByClassName("item")[0]选择父元素，易受页面结构变化影响，无法确保插入到目标a标签的同级位置。
3. else分支逻辑冗余：移除元素后仍调用slideUp()，此时元素已不存在，会引发控制台报错。

修正后的代码 #

function get_all_the_values(){
    return $.ajax({
            url: '/php_script.php',
            type: 'POST',
            data: {"input": "get values"}
    });
}
$(document).ready(function(){
     $('#item1').click(function(){
        const $item1 = $(this);
        const $subMenu = $item1.next('.sub-menu');
        
        // 判断子菜单不存在或未显示时创建/显示
        if(!$subMenu.length || !$subMenu.is(':visible')){
            // 立即执行异步函数
            (async()=>{
                let response = await get_all_the_values();
                let arr;
                // 增加JSON解析容错
                try {
                    arr = JSON.parse(response);
                } catch(e) {
                    console.error('JSON解析失败:', e);
                    return;
                }
                
                // 子菜单已存在则直接显示，避免重复创建
                if($subMenu.length){
                    $subMenu.slideDown();
                    return;
                }
                
                // 创建子菜单元素
                let elem = document.createElement("div");
                elem.className="sub-menu";
                elem.id="id1";
                for(var i=0; i<arr.length; i++){
                    var anchor = document.createElement("a");
                    anchor.className="sub-item";
                    anchor.href="#";
                    anchor.innerText = arr[i];
                    elem.appendChild(anchor);
                }
                
                // 精准插入到当前a标签的父元素，保持与item2一致的结构
                $item1.parent().append(elem);
                // 执行显示动画
                $('#id1').slideDown();
              })();
         }
         else{
             // 先执行收起动画，完成后再移除元素
             $subMenu.slideUp(() => {
                 $('#id1').remove();
             });
         }
     });
});

关键修改说明 #

• 触发async函数执行：在异步匿名函数末尾添加()，确保内部代码能正常运行。
• 精准定位父元素：用$item1.parent()替代全局选择器，确保子菜单插入到当前点击的a标签同级位置，和item2的DOM结构完全匹配。
• 优化判断逻辑：先检查子菜单是否已存在，避免重复创建；增加JSON解析的错误捕获，防止数据异常导致后续代码中断。
• 修复收起逻辑：先执行slideUp动画，动画完成后再移除元素，避免元素提前消失引发的异常。

补充说明 #

动态创建的元素只要class正确，会自动应用现有CSS样式，问题本质并非样式不生效，而是元素未被正确创建或触发显示逻辑。

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