因为一开始第一级目录用的都是一样的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上了,明天要加快进度了!