我在左边有菜单。下面有一个叫做vod的子菜单，vod下有主题，主题下有主题，主题下有一些视频。所有这些数据都是通过ajax调用到受人尊敬的API（比如class->class10、class11、class12；数学、英语；数学->代数，微积分；代数->受尊重的视频等）
这是第一层

<div id="vodExpand" class="navbar nav1" style="display:none">

        </div>

    function liveVODKK(){

    $('#replaceUpcoming').css('display','none');
    $('#upcomingSchedule').css('display','none');
    $('#liveChannel').css('display','none');
    $('#channel').css('display','none');
    $('#createTest').css('display','none');
    $('#mcqTest').css('display','none');
    $('#editMcq').css('display','none');
    $('#courseUpload').css('display','none');
    $('#liveVod').css('display','none');
    $('#vod').css('display','none');
    $('#tAnnouncements').css('display','none');
    $('#sAnnouncements').css('display','none');
    $('#studentMcq').css('display','none');
    $('#questionsSet').css('display','none');
    $('#studentResult').css('display','none');
    $('#classReports').css('display','none');

    $('#liveChannelView').css('display','none');
    $('#liveVodView').css('display','none');
    $.ajax({
        url:'http://51.81.106.157/education_admin_api/vod.php',
        headers: {
            'Authorization':'${sessionScope.token}'
        },
        type:'POST',
        data: {
            'task' : 'get_vod_class'
        },      
        success:function(json){
            $('#vodExpand').css('display','block');
            $('#vodExpand').empty();
            for(var i=0; i<json.data.length;i++)
            {

                $('#vodExpand').append('<li class="nav-item dropdown">'+
                        '<a class="nav-link dropdown-toggle white_left_link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-file-text icon_menu" aria-hidden="true"></i> VOD</a>'+
                        '<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">'+
                        '<li class="dropdown"><a class="dropdown-item dropdown-toggle" id="navbarDropdownMenuLink2" onclick=subjectForVodClass('+json.data[i].id+') data-toggle="dropdown" data-target="#vodClassExpand" href="#"><i class="fa fa-language icon_menu" aria-hidden="true"></i>'+json.data[i].vod_class_name+'</a></li>'+
                        '<input type="hidden" id="vodClassId" value="'+json.data[i].id+'">'+

                        '<ul class="dropdown-menu" data-toggle="dropdown" id="vodClassExpand" style="display:none">'

                        );

            }
            //liveVodKK();

            //dateTimePicker();

        },
        error:function(e){
            console.log(e)
        }
    });

}

这是第二层

function subjectForVodClass(vodClassId){
    $.ajax({
        url:'http://51.81.106.157/education_admin_api/vod.php',
        headers: {
            'Authorization':'${sessionScope.token}'
        },
        type:'POST',
        data: {
            'task' : 'get_vod_class_subject',
            'vod_class_id' : vodClassId
        },      
        success:function(json){

            $('#vodExpand').css('display','block');
            //$('#vodExpand').empty();

            $('#vodClassExpand').css('display','block');
            $('#vodClassExpand').empty();
            for(var i=0; i<json.data.length;i++)
            {
                //$('#vodExpand').append('<p><a href="#" class="white_left_link" onclick=viewVodKK("'+json.data[i].vod_source+'","'+json.data[i].id+'","'+json.data[i].vod_name.replace(/\s/g, "")+'")><i class="fa fa-file-text icon_menu" aria-hidden="true"></i>'+json.data[i].vod_name +'</a></p>');
                $('#vodClassExpand').append('<li class="dropdown"><a class="dropdown-item dropdown-toggle" id="navbarDropdownMenuLink3" onclick=topicForVodSubject('+json.data[i].id+') data-toggle="dropdown" data-target="#vodClassSubjectExpand" href="#"><i class="fa fa-language icon_menu" aria-hidden="true"></i>'+json.data[i].vod_subject_name+'</a></li>'+
                        '<input type="hidden" id="vodClassSubjectId" value="'+json.data[i].id+'">'+

                        '<ul class="dropdown-menu" id="vodClassSubjectExpand" style="display:none">'

                        );
                //topicForVodSubject();
                //subjectForVodClass(vodClassId);

            }

            //dateTimePicker();

        },
        error:function(e){
            console.log(e)
        }
    });

}

这里是第三层

function topicForVodSubject(vodSubjectId){

    $.ajax({
        url:'http://51.81.106.157/education_admin_api/vod.php',
        headers: {
            'Authorization':'${sessionScope.token}'
        },
        type:'POST',
        data: {
            'task' : 'get_vod_class_subject_topic',
            'vod_subject_id' : vodSubjectId
        },      
        success:function(json){

            $('#vodExpand').css('display','block');
            //$('#vodExpand').empty();

            $('#vodClassExpand').css('display','block');
            //$('#vodClassExpand').empty();

            $('#vodClassSubjectExpand').css('display','block');
            $('#vodClassSubjectExpand').empty();
            for(var i=0; i<json.data.length;i++)
            {

                $('#vodClassSubjectExpand').append('<li><a class="dropdown-item" id="viewVodKK" href="#" onclick=viewVodKK("'+json.data[i].vod_topic_source+'")><i class="fa fa-video-camera icon_menu" aria-hidden="true"></i>'+json.data[i].vod_topic_name+'</a></li>'+
                                                                '</ul>'+
                                                            '</ul>'+                            
                                                        '</ul>'+
                                                    '</li>'
                                                  );
                //topicForVodSubject(vodSubjectId);

            }

            //dateTimePicker();

        },
        error:function(e){
            console.log(e)
        }
    });

}

因此，每个级别都依赖于以前的级别值，即id
这是输出

现在的问题是，每次我点击任何中间级别（如数学）时，整个子菜单都会折叠。我必须点击视频点播栏，然后它被扩展，然后数据被加载。所以关键是我不能在中间阶段切换。我怎样才能解决这个问题？欢迎使用任何其他javascript或jquery解决方案，谢谢