各位大神，我这个代码不兼容，谁可以帮我重新写一下js，代码内容如下
0
[待解决问题]
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul li{
list-style: none;
}
/*弹出菜单部分样式*/
#cate-box {
position: relative;
}
.sub-cate-box {
display: none;
position: absolute;
left: 198px;
top: 0px;
width: 705px;
background-color: #fff;
overflow: visible;
z-index: 70;
height: 516px;
box-shadow: 0 0 2px #0bb161;
}
.sub-cate-items {
float: left;
height: 452px;
}
/*二级分类菜单*/
.sub-cate-items > div {
clear: left;
width: 750px;
}
.sub-cate-items > div p {
border-bottom: 1px solid #E8E8E7;
width: 600px;
padding-top: 15px;
padding-bottom: 15px;
}
.sub-cate-items > div > a {
display: block;
float: left;
width: 54px;
height: 22px;
line-height: 30px;
text-align: left;
padding: 10px 8px 0 10px;
color: #fe7201;
font-weight: 700;
}
.sub-cate-items p {
line-height: 22px;
width: 500px;
float: left;
}
.sub-cate-items p a {
height: 22px;
line-height: 22px;
text-align: right;
display: inline-block;
padding: 0 4px;
margin: 4px 0;
border-left: 1px solid #ccc;
color: #666;
}
.sub-cate-items p a:hover {
color: #fe7201;
}
</style>
</head>
<body>
<div id="category">
<a href="javascript:;" class="classify">全部服务分类</a>
<div id="category-box">
<ul id="cate-box">
<li>
<h2>
质保服务
</h2>
<div class="sub-cate-box">
<div class="sub-cate-items">
<div>
<a href="javascript:;"></a>
<p>
<a href="javascript:;">审核、校对</a>
</p>
</div>
</div>
</div>
</li>
<li>
<h2>
建筑设计
</h2>
<div class="sub-cate-box">
<div class="sub-cate-items">
<div>
<a href="javascript:;">分项设计</a>
<p>
<a href="javascript:;">建筑小品结设计</a>
</p>
</div>
<div>
<a href="javascript:;">特殊设计</a>
<p>
<a href="javascript:;">仿古建筑设计</a>
<a href="javascript:;"> 教堂设计</a>
<a href="javascript:;">清真寺建筑设计</a>
<a href="javascript:;">殡仪馆建筑设计</a>
<a href="javascript:;">冷库、仓库建筑设计</a>
<a href="javascript:;">氢气站设计</a>
<a href="javascript:;"> 烟囱冷水塔设计</a>
<a href="javascript:;">石油库设计</a>
<a href="javascript:;">传染病医院设计</a>
<a href="javascript:;">屠宰与分割车间设计</a>
<a href="javascript:;">社区服务站设计</a>
<a href="javascript:;">体育场、剧场电影多用途厅堂声学设计</a>
<a href="javascript:;">文物防火、防盗设计</a>
<a href="javascript:;">智能化系统系统集成设计</a>
<a href="javascript:;">建筑光学设计</a>
<a href="javascript:;">超高层消防设计</a>
<a href="javascript:;">人防设计</a>
<a href="javascript:;">节能设计</a>
<a href="javascript:;">土木石建筑设计</a>
<a href="javascript:;">医疗工艺设计</a>
<a href="javascript:;">其他特殊设计</a>
</p>
</div>
</div>
</div>
</li>
<li>
<h2>
结构设计
</h2>
<div class="sub-cate-box">
<div class="sub-cate-items">
<div>
<a href="javascript:;">分项设计</a>
<p>
<a href="javascript:;">其他分项设计</a>
</p>
</div>
<div>
<a href="javascript:;">特殊设计</a>
<p>
<a href="javascript:;">钢结构设计</a>
<a href="javascript:;">索膜机结构设计</a>
<a href="javascript:;">大挎预应力机构设计</a>
<a href="javascript:;">网架机构设计</a>
<a href="javascript:;">钢桁架设计</a>
<a href="javascript:;">排架机构设计</a>
<a href="javascript:;">土木石结构设计</a>
<a href="javascript:;">水池机构设计</a>
<a href="javascript:;">设备平台设计</a>
<a href="javascript:;">管架管廊结构设计</a>
<a href="javascript:;">烟囱设计</a>
<a href="javascript:;">筒仓结构设计</a>
<a href="javascript:;">观光塔水塔设计</a>
<a href="javascript:;">活动板房设计</a>
<a href="javascript:;">油罐装配图机构设计</a>
<a href="javascript:;"> 结构安全性评估</a>
<a href="javascript:;">高耸结构设计</a>
<a href="javascript:;"> 多层厂房楼盖抗微振设计</a>
<a href="javascript:;">景观水池结构设计</a>
<a href="javascript:;">隔震及消能减震设计</a>
<a href="javascript:;"> 建筑抗震性能化设计</a>
<a href="javascript:;"> 其他特殊设计</a>
</p>
</div>
<div>
<a href="javascript:;">计算分析</a>
<p>
<a href="javascript:;">隔震及消能减震计算</a>
<a href="javascript:;">建筑抗震性能化设计计算</a>
<a href="javascript:;">楼板舒适度计算</a>
<a href="javascript:;">抗连续倒塌计算</a>
<a href="javascript:;">加固设计计算</a>
<a href="javascript:;">大垮度、稳定性分析</a>
<a href="javascript:;">超限审查报告</a>
<a href="javascript:;">超高层基础沉降计算</a>
<a href="javascript:;">复杂结构弹塑性时程分析</a>
<a href="javascript:;">复杂结构空间分析计算</a>
<a href="javascript:;">施工阶段分析</a>
<a href="javascript:;">温度应力分析</a>
</p>
</div>
</div>
</div>
</li>
<li>
<h2>
电气设计
</h2>
<div class="sub-cate-box">
<div class="sub-cate-items">
<div>
<a href="javascript:;">分项设计</a>
<p>
<a href="javascript:;">其他分项设计</a>
</p>
</div>
<div>
<a href="javascript:;">特殊设计</a>
<p>
<a href="javascript:;">变电站、所设计</a>
<a href="javascript:;">停车智能系统设计</a>
<a href="javascript:;">交通信号设计</a>
<a href="javascript:;">热交换站设计</a>
<a href="javascript:;">文物建筑防震设计</a>
<a href="javascript:;">其他特殊设计</a>
</p>
</div>
</div>
</div>
</li>
<li>
<h2>
给排水设计
</h2>
<div class="sub-cate-box">
<div class="sub-cate-items">
<div>
<a href="javascript:;">分项设计</a>
<p>
<a href="javascript:;">其他分项设计</a>
</p>
</div>
<div>
<a href="javascript:;">特殊设计</a>
<p>
<a href="javascript:;">游泳池设计</a>
<a href="javascript:;">按摩池设计</a>
<a href="javascript:;">水景池设计</a>
<a href="javascript:;">太阳能热水系统设计</a>
<a href="javascript:;">雨水回收利用设计</a>
<a href="javascript:;">中水系统设计</a>
<a href="javascript:;">气体消防设计</a>
<a href="javascript:;">虹吸雨水设计</a>
<a href="javascript:;">消防炮设计</a>
<a href="javascript:;">其他特殊设计</a>
</p>
</div>
</div>
</div>
</li>
<li>
<h2>
暖通设计
</h2>
<div class="sub-cate-box">
<div class="sub-cate-items">
<div>
<a href="javascript:;">分项设计</a>
<p>
<a href="javascript:;">其他分项设计</a>
</p>
</div>
<div>
<a href="javascript:;">特殊设计</a>
<p>
<a href="javascript:;">冷库设计</a>
<a href="javascript:;">恒温横湿设计</a>
<a href="javascript:;">蒸汽系统设计</a>
<a href="javascript:;">换站设计</a>
<a href="javascript:;">锅炉房设计</a>
<a href="javascript:;">噪音控制设计</a>
<a href="javascript:;">工厂通风除尘设计</a>
<a href="javascript:;">其他特殊设计</a>
</p>
</div>
</div>
</div>
</li>
<li>
<h2>
图纸服务
</h2>
<div class="sub-cate-box">
<div class="sub-cate-items">
<div>
<a href="javascript:;"></a>
<p>
<a href="javascript:;">竣工图代工</a>
</p>
</div>
</div>
</div>
</li>
<li>
<h2>
BIM服务
</h2>
<div class="sub-cate-box">
<div class="sub-cate-items">
<div>
<a href="javascript:;"></a>
<p>
<a href="javascript:;">基于BIM的施工监造</a>
</p>
</div>
</div>
</div>
</li>
<li>
<h2>
加固改造
</h2>
<div class="sub-cate-box">
<div class="sub-cate-items">
<div>
<a href="javascript:;"></a>
<p>
<a href="javascript:;">预应力加固</a>
</p>
</div>
</div>
</div>
</li>
<li>
<h2>
岩土设计
</h2>
<div class="sub-cate-box">
<div class="sub-cate-items">
<div>
<a href="javascript:;"></a>
<p>
<a href="javascript:;">岩土勘察设计</a>
</p>
</div>
</div>
</div>
</li>
<li>
<h2>
市政设计
</h2>
<div class="sub-cate-box">
<div class="sub-cate-items">
<div>
<a href="javascript:;"></a>
<p>
<a href="javascript:;">轨道交通设计</a>
</p>
</div>
</div>
</div>
</li>
<li>
<h2>
惠民服务
</h2>
<div class="sub-cate-box">
<div class="sub-cate-items">
<div>
<a href="javascript:;"></a>
<p>
<a href="javascript:;">房屋检测、房屋鉴定</a>
</p>
</div>
</div>
</div>
</li>
<li>
<h2>
工程咨询
</h2>
<div class="sub-cate-box">
<div class="sub-cate-items">
<div>
<a href="javascript:;"></a>
<p>
<a href="javascript:;">专项论证</a>
</p>
</div>
</div>
</div>
</li>
<li>
<h2 class="last">
其他
</h2>
<div class="sub-cate-box">
<div class="sub-cate-items">
<div>
<a href="javascript:;">现场服务</a>
<p>
<a href="javascript:;">现场服务</a>
</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
$().ready(function(){
var lis=$("#cate-box>li");
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
this.lastElementChild.style.display="block";
this.firstElementChild.className="";
}
lis[i].onmouseout=function(){
this.lastElementChild.style.display="none";
this.firstElementChild.className="";
}
}
})
</script>
</body>
</html>
所有回答(1)
0
我修改了你的js代码，你试下
<!-- <script src="js/jquery-1.11.3.js"></script> -->
<script type="text/javascript" src="../js/jquery-1.7.1.min.js?version=1.3"></script>
<script>
$(document).ready(function(){
debugger
var lis=$("#cate-box>li");
for(var i=0;i<lis.length;i++){
$(lis[i]).attr("onmouseover","over1(this)");
$(lis[i]).attr("onmouseout","out1(this)");
}
});
function over1(obj){
$(obj).find("div:first").show();
}
function out1(obj){
$(obj).find("div:first").hide();
}
</script>
