EasyUI Accordion 動態加載樹形菜單：ID 衝突與 HTML 結構不規範導致子菜單不顯示

問題代碼關鍵缺陷

// 1. 重複 ID 衝突
menulist += '<div id="tree' + mid + '"></div>';
content: "<ul id='tree" + mid + "'></ul>", // 同一頁面出現兩個相同 id="treeXXX"

// 2. 點擊事件選擇器錯誤
$('#' + mid).tree('isLeaf', node.target) // 但頁面從未創建 id="mid" 的元素

// 3. HTML 結構不合規
menulist += '<ul>';
menulist += '<div id="tree' + mid + '"></div>'; // ul 直系子元素只能是 li
menulist += '</ul>';

修正方案

1. ID 唯一化：容器用 treeContainer_${mid}，樹容器用 tree_${mid}。
2. 修正選擇器：$('#tree_' + mid).tree(...)。
3. 規範 HTML：<ul><li><div id="tree_${mid}"></div></li></ul> 或直接用 <ul id="tree_${mid}"></ul>。

重構後核心邏輯

function addNav(data) {
    $('#menu').accordion();
    $.each(data, function(i, m) {
        var mid = m.id;
        var treeId = 'tree_' + mid;
        var containerId = 'container_' + mid;

        $('#menu').accordion('add', {
            title: m.text,
            content: '<ul id="' + treeId + '"></ul>', // 直接用 ul 作為 tree 容器
            iconCls: 'icon icon-sys',
            selected: true
        });

        // 等 accordion 渲染完成後再初始化 tree
        setTimeout(function() {
            $('#' + treeId).tree({
                data: m.children,
                animate: true,
                onClick: function(node) {
                    if ($('#' + treeId).tree('isLeaf', node.target)) {
                        addTab(node.text, node.url, node.icon);
                    }
                }
            });
        }, 0);
    });
}

關鍵點總結

• **動態添加 Accordion 面板後，內容 DOM 已就緒，再初始化 Tree**。
• **ID 全局唯一**，避免選擇器匹配錯誤元素。
• **HTML 語義正確**，ul > li > div 或 ul > li，不直接 ul > div。
• EasyUI 組件初始化順序：父容器渲染完成 → 子組件初始化。

總結

子菜單不顯示源於 **ID 衝突、選擇器錯誤、HTML 不合規** 三重問題。重構後代碼結構清晰、ID 隔離、初始化時序正確，即可正常渲染多級菜單。