使用jq实现左侧导航条

需求：需要用原生js或者jq实现左侧导航栏固定宽度，且能触发点击。如下图所示

 html页面代码：

<div  style="width: 25%;background-color:#F9F9F9;overflow: scroll;position: fixed;top: 65px;left: 0;bottom: 0;z-index: 999999999999999;border: 0;">
 <div style="padding: 0;" id="leftTrees"></div>
</div>

jq代码 ①动态给页面添加元素，模拟后端传递过来的数据

function drawingLeftTree() {
    var leftTree = [
        {
            id: 1,
            name: '手机',
        },
        {
            id: 2,
            name: '电脑',
        },
        {
            id: 3,
            name: '空调',
        },
        {
            id: 4,
            name: '电冰箱',
        },
        {
            id: 5,
            name: '显示屏',
        },
        {
            id: 6,
            name: '办公桌',
        },
        {
            id: 7,
            name: '电竞椅',
        },
        {
            id: 8,
            name: '插线板',
        },
        {
            id: 9,
            name: '书柜',
        },
        {
            id: 10,
            name: '发电机',
        },
        {
            id: 11,
            name: '车',
        }
    ]
    var leftStr = ''
    var init = '<div id="" class="assetsListClass assActive">全部</div>'
    for (var i = 0; i < leftTree.length; i++) {
        leftStr += ' <div id="' + leftTree[i].id + '" class="assetsListClass">' + leftTree[i].name + '</div>'
    }
    var left = init + leftStr
    $("#leftTrees").html(left)

实现触发点击事件，高亮显示 通过jq函数中的slbings元素

 $("#leftTrees .assetsListClass").click(function () {
        categoryId = $(this).context.id;
        // 去除所点击的兄弟元素class上面的assActive属性
        $(this).siblings().removeClass("assActive")
        // 给点击元素添加属性
        $(this).addClass("assActive")
        //重新渲染右侧内容区域
        drawingRightContent();
    })
}