JQueryEasyUI布局加载问题

<div id="fr-sidebar" style="width:200px;" class="easyui-accordion" data-options="multiple:false">
     
</div>
 
<script type="text/javascript">
 
    $(function() {
        $.ajax({
            url : Tmp.ctx + "/menus",
            type : "get",
            dataType : "json",
            success : function(data) {
                console.log(data);
                $.each(data, function(index, menuGroup) {
                    var panel = "<div style='height:200px;' title='" + menuGroup.name + "'><ul>";
                    $.each(menuGroup.subMenus, function(i, menu) {
                        var list = "<li><a href='" + menu.url + "'>" + menu.name + "</a></li>";
                        panel += list;
                    });
                    panel += "</ul></div>";
                    $("#fr-sidebar").append(panel);
                });
            },
            error : function(data) {
                $.messager.alert("提示", "菜单加载失败");
            }
             
        });
    });
</script>

问题是，当我把拼接的HTML append 到easyui的Accordion容器后，他不会为我初始化为easyui的效果。
最后生成的代码如下：