jQuery.Easyui 三层菜单的实现

时间:2023-03-09 07:47:38
jQuery.Easyui 三层菜单的实现

有图才有真相:

jQuery.Easyui 三层菜单的实现

三层导航菜单JSON 数据格式如下:

jQuery.Easyui 三层菜单的实现
jQuery.Easyui 三层菜单的实现
].panel('options').title;
    $('#wnav').accordion('select', t);

}

// 初始化左侧
function InitLeftMenu() {
    
    hoverMenuItem();

$('#wnav li a').live('click', function() {
        var tabTitle = $(this).children('.nav').text();

var url = $(this).attr("rel");
        var menuid = $(this).attr("ref");
        var icon = getIcon(menuid, icon);

addTab(tabTitle, url, icon);
        $('#wnav li div').removeClass("selected");
        $(this).parent().addClass("selected");
    });

}

/**
 * 菜单项鼠标Hover
 */
function hoverMenuItem() {
    $(".easyui-accordion").find('a').hover(function() {
        $(this).parent().addClass("hover");
    }, function() {
        $(this).parent().removeClass("hover");
    });
}

jQuery.Easyui 三层菜单的实现

大至思路就是 点击*菜单后左侧先清空在添加,清空和添加均使用EASYUI插件提供的 remove 和 add 方法