2021-07-15 今日进度记录

因为一开始第一级目录用的都是一样的class值"class=one",所以一度不知道该怎么写js才能达到想要的效果，查了好久的资料愣是没找到可能的解决办法（应该有只是我没查到），所以重新写了下患者信息栏界面的侧边栏以及其涉及到的部分交互功能。今天的进度着实是有些慢了。主要用的还是show和hide外加slideUp和slideToggle以及css。话不多说，上代码：

    $(document).ready(function(){
        $(".one").click(function(){
            //点击日期文件、病例按钮出现
            $("#main-header").show();
            $("#start").show();
            $(".filecase").show();
            $(".project").hide();
            $(".bingli").hide();
            $(this).css("background","white","border-radius","2px");
            $("#fileid").css("background","rgba(170, 159, 0, 0.787)");
            $("#caseid").css("background","rgba(170, 159, 0, 0.787)");
        });

        //患者A就诊时间
        $("#date1 a:first").click(function(){
            $("#date1 > .two").slideToggle();
            $(this).css("color","red");
        });
        $("#date2 a:first").click(function(){
            $("#date2 > .two").slideToggle();
            $(this).css("color","red");
        });
        $("#date3 a:first").click(function(){
            $("#date3 > .two").slideToggle();
            $(this).css("color","red");
        });
        $("#date4 a:first").click(function(){
            $("#date4 > .two").slideToggle();
            $(this).css("color","red");
        });
        $("#date1").click(function(){
            $("#date2 > .two").slideUp();
            $("#date3 > .two").slideUp();
            $("#date4 > .two").slideUp();
            $("#date2 a").css("color","rgb(32, 0, 68)");
            $("#date3 a").css("color","rgb(32, 0, 68)");
            $("#date4 a").css("color","rgb(32, 0, 68)");
            $("#date2").css("background","none","border-radius","0");
            $("#date3").css("background","none","border-radius","0");
            $("#date4").css("background","none","border-radius","0");
            $("#fileid").css("background","rgba(170, 159, 0, 0.787)");
            $("#caseid").css("background","rgba(170, 159, 0, 0.787)");
        });
        $("#date2").click(function(){
            $("#date1 > .two").slideUp();
            $("#date3 > .two").slideUp();
            $("#date4 > .two").slideUp();
            $("#date4 a").css("color","rgb(32, 0, 68)");
            $("#date1 a").css("color","rgb(32, 0, 68)");
            $("#date3 a").css("color","rgb(32, 0, 68)");
            $("#date1").css("background","none","border-radius","0");
            $("#date3").css("background","none","border-radius","0");
            $("#date4").css("background","none","border-radius","0");
            $("#fileid").css("background","rgba(170, 159, 0, 0.787)");
            $("#caseid").css("background","rgba(170, 159, 0, 0.787)");
        });
        $("#date3").click(function(){
            $("#date1 > .two").slideUp();
            $("#date2 > .two").slideUp();
            $("#date4 > .two").slideUp();
            $("#date1 a").css("color","rgb(32, 0, 68)");
            $("#date2 a").css("color","rgb(32, 0, 68)");
            $("#date4 a").css("color","rgb(32, 0, 68)");
            $("#date2").css("background","none","border-radius","0");
            $("#date1").css("background","none","border-radius","0");
            $("#date4").css("background","none","border-radius","0");
            $("#fileid").css("background","rgba(170, 159, 0, 0.787)");
            $("#caseid").css("background","rgba(170, 159, 0, 0.787)");
        });
        $("#date4").click(function(){
            $("#date1 > .two").slideUp();
            $("#date2 > .two").slideUp();
            $("#date3 > .two").slideUp();
            $("#date1 a").css("color","rgb(32, 0, 68)");
            $("#date2 a").css("color","rgb(32, 0, 68)");
            $("#date3 a").css("color","rgb(32, 0, 68)");
            $("#date2").css("background","none","border-radius","0");
            $("#date3").css("background","none","border-radius","0");
            $("#date1").css("background","none","border-radius","0");
            $("#fileid").css("background","rgba(170, 159, 0, 0.787)");
            $("#caseid").css("background","rgba(170, 159, 0, 0.787)");
        });
        $("#fileid").click(function(){
            //点击文件出现文件信息
            $(".project").show();
            $(".bingli").hide();
            $(this).css("background","red");
            $("#caseid").css("background","rgba(170, 159, 0, 0.787)");
        });
        $("#caseid").click(function(){
            //点击病例出现病人详细病例
            $(".bingli").show();
            $(".project").hide();
            $(this).css("background","red");
            $("#fileid").css("background","rgba(170, 159, 0, 0.787)");
        });
    });

最后效果大致是这样的：


今天时间主要是花在查资料和找bug改bug上了，明天要加快进度了！

标签：15,07,slideUp,color,two,radius,2021,background,css
来源： https://blog.csdn.net/qq_44540109/article/details/118764982