<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#subView body,ul,li{margin: auto;padding: ;font-family: 'Microsoft Yahei',Arial, sans-serif}
#subView ul,#subView li{list-style-type: none;cursor: pointer;color: black;line-height: px;text-align: center;}
#subView ul{width: px;}
#subView ul span{background-color: #EDEDED;color: #717070;display: block;font-size: px;border-bottom: px solid #ccc; text-align: left;}
#subView ul span:hover{background-color: #07bc6e;color: white}
#subView .ulSelected{background-color: #07bc6e !important;color: white !important}
#subView .liSelected{background-color: #07bc6e !important;color: white !important}
#subView ul span p{margin-left: %;padding: px}
#subView li{background-color: #d0d0d0;display: none;}
#subView li:hover{background-color: #89d8b6;}
#subView li p{text-align: left;margin-left: %;padding: px}
#subView b{display: inline;float: right;padding-right: px;}
li{width: px;}
</style>
<script type="text/javascript" src="../jquery.1.10.js"></script>
</head>
<body>
<div class="subView" id=subView>
<ul id="ambu_check">
<span><p>安保检查</p></span>
<li data-url="/sysweb/taskmanage/ambucheck/newambucheck.action" ><p>添加检查</p></li>
<li data-url="/sysweb/taskmanage/ambucheck/ambucheckrecord.action"><p>安保检查记录</p></li>
</ul>
<ul id="selfServer_check">
<span><p>自助服务区检查</p></span>
<li data-url="/sysweb/taskmanage/selfservercheck/newSelfServerCheck.action"><p>添加检查</p></li>
<li data-url="/sysweb/taskmanage/selfservercheck/selfServerRecord.action"><p>自助服务区检查记录</p></li>
</ul>
<ul id="selfDevice_check">
<span><p>自助设备检查</p></span>
<li data-url="/sysweb/taskmanage/selfdevicecheck/newSelfDeviceCheck.action"><p>添加检查</p></li>
<li data-url="/sysweb/taskmanage/selfdevicecheck/selfDeviceRecord.action"><p>自助设备检查记录</p></li>
</ul>
<ul id="safeDevice_check">
<span><p>安全设施检查</p></span>
<li data-url="/sysweb/taskmanage/safedevicecheck/newSafeDeviceCheck.action"><p>添加检查</p></li>
<li data-url="/sysweb/taskmanage/safedevicecheck/safeDeviceRecord.action"><p>安全设施检查记录</p></li>
</ul>
<ul id="alarmSys_check">
<span><p>报警系统测试检查</p></span>
<li data-url="/sysweb/taskmanage/alarmsystemcheck/newAlarmSystemCheck.action"><p>添加检查</p></li>
<li data-url="/sysweb/taskmanage/alarmsystemcheck/alarmSystemRecord.action"><p>报警系统测试检查记录</p></li>
</ul>
</div>
</body>
<script type="text/javascript">
$(function(){
$("ul > span").bind("click",function(){
if($(this).hasClass("ulSelected")){
return
}
if($(this).siblings('li').hasClass('on')){
$(this).siblings('li').slideUp().removeClass('on');
}else{
$(this).siblings('li').slideDown().addClass('on');
}
var spanArray = $("ul > span");
for (var i = spanArray.length - ; i >= ; i--) {
if($(spanArray[i]).hasClass("ulSelected") && $(spanArray[i])[] !== $(this)[]){
$(spanArray[i]).removeClass("ulSelected");
$(spanArray[i]).siblings('li').slideUp().removeClass('on').removeClass('liSelected');
}
}
if(!$(this).hasClass("ulSelected")){
$(this).addClass("ulSelected");
$(this).siblings("li:first").click()
}
})
$("ul > li").bind("click",function(){
var liArray = $("ul > li");
//var liUrl = $(this).data('url');
for (var i = liArray.length - ; i >= ; i--) {
if($(liArray[i]).hasClass("liSelected")){
$(liArray[i]).removeClass("liSelected");
}
}
if(!$(this).hasClass("liSelected")){
$(this).addClass("liSelected");
}
//$("#main-wrap").load(liUrl);
})
$("ul > span:first").click()
})
</script>
</html>
样式简单,但是可以自己调,功能基本完成,如果需要自己添加也能稍作修改就能使用,因为自己的项目需要兼容ie8,使用多个插件貌似都有点问题,于是简单的写了一个.
![Java十大算法之弗洛伊德算法[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)