javascript - 动态嵌套可折叠javascript

Question

我在左侧有一个菜单。在它下面有一个叫做vod的子菜单，在vod下面有主题，在主题下有主题，在主题下有一些视频。以及所有这些数据都来自 ajax 调用受尊敬的 api（如 class-> class 10,class 11,class12; class10-> maths,english; maths-> algebra,calculus; algebra-> respected video 等等）

这是第一级

<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

这是输出

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

标签： javascripthtmljqueryajax