JS折叠展开一个二级导航菜单效果

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JS折叠展开一个二级导航菜单效果</title> 
<style> 
body{ margin:0 auto; padding:0; font-size:12px;text-align:center;} 
a{text-decoration:none;} 
.top_menu{   line-font-size:14px; color:#FFF; font-weight:bold;background:#666; display:block; cursor:pointer;} 
.sub_meuu{ height:auto; line-} 
.sub_meuu a{font-size:12px; color:#00C; display:block; clear:both;} 
</style> 
<script language="javascript"> 
tempj=2; 
function showed(tempi) 
{ 
if(document.getElementById("show"+tempj.toString()).style.display==''&&tempi!=tempj) 
{ 
document.getElementById("show"+tempj.toString()).style.display='none'; 
} 
if(document.getElementById("show"+tempi.toString()).style.display=='none') 
{ 
document.getElementById("show"+tempi.toString()).style.display=''; 
} 
else 
{ 
document.getElementById("show"+tempi.toString()).style.display='none'; 
} 
tempj=tempi; 
} 
</script> 
</head> 
<div class="top_menu" onclick="javascript:showed(1);">公司概况</a></div> 
<div class="sub_meuu" id="show1" style="display:none;"><a href="#">公司简介</a><a href="#">公司文化</a><a href="#">服务流程</a></div> 
<div class="top_menu" onclick="javascript:showed(2);">公司快讯</div> 
<div class="sub_meuu" id="show2" style="display:none;"><a href="#">公司动态</a><a href="#">新闻中心</a><a href="#">装修课堂</a></div> 
<div class="top_menu" onclick="javascript:showed(3);">精典案例</div> 
<div class="sub_meuu" id="show3" style="display:none;"><a href="#">先进工艺</a><a href="#">专业团队</a><a href="#">参观工地</a></div> 
<body> 
</body> 
</html> </td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

JS折叠展开一个二级导航菜单效果

相关文章

精彩推荐