jQuery左侧菜单栏实现 - 导航切换、展开收起、动态加载 - 常规

这是一个使用jQuery的脚本，主要功能是实现一个左侧菜单栏，包括导航切换、菜单展开收起、动态加载菜单等功能。具体实现过程为：

绑定菜单项的点击事件，点击时切换菜单项的选中状态：

$(function () {
    //导航切换
    $('.menuson li').click(function () {
        $('.menuson li.active').removeClass('active')
        $(this).addClass('active');
    });

    // ...
});

绑定菜单标题的点击事件，点击时展开或收起对应的子菜单：

$(function () {
    // ...

    $('.title').click(function () {
        var $ul = $(this).next('ul');
        $('dd').find('ul').slideUp();
        if ($ul.is(':visible')) {
            $(this).next('ul').slideUp();
        } else {
            $(this).next('ul').slideDown();
        }
    });

    // ...
});

通过ajax请求获取后台返回的菜单数据，循环遍历并将菜单项动态添加到左侧菜单栏中：

$(function () {
    // ...

    // 加载菜单
    $.ajax({
        type: "post",
        url: "/menu/getMenuByMenuBelong",
        success: function (data) {
            if (data.code == 1) {
                for (let i = 0; i < data.data.length; i++) {
                    $('#leftmenu').append(`<dd>
        <div class='title'>
            <span><img src='${data.data[i].menuIcon}'/></span><a href='${data.data[i].menuUrl}' target='rightFrame'>${data.data[i].menuText}</a>
        </div>
    </dd>`);
                }
            } else {
                $.MsgBox.Alert(data.msg);
            }
        },
        error: function () {
            $.MsgBox.Alert("错误", "加载菜单出错！");
        }
    })
});

该脚本通过jQuery的简单操作实现了左侧菜单栏的基本功能，并利用ajax与后台交互，动态加载菜单内容，为用户提供便捷的操作体验。