一、效果展示
1、初始状态,效果
2、点击“显示或隐藏”连接,效果
3 、再次点击“显示或隐藏”连接,效果
二、实现代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>显示隐藏div</title>
<script type="text/javascript">
function isShowSecond(firstId,secondId){
var flag = document.getElementById(firstId).value;
if(flag == 'false'){
document.getElementById(secondId).style.display="";
document.getElementById(firstId).value="true";
}else{
document.getElementById(firstId).value="false";
document.getElementById(secondId).style.display="none";
}
}
</script>
</head>
<body>
<div style="width:150px;height:31px;border: 1px solid red;">
<input type="hidden" id="firstDiv"value="false" />
<a href="javascript:isShowSecond('firstDiv','secondDiv')" style="width:100px;height:31px; border: 1px solid red;">显示或隐藏
</a>
<div id="secondDiv" style="display: none; padding-left: 30px;">
<div style="width:100px;height:31px; border: 1px solid red;">
<a href="javascript:">二级div</a>
</div>
<div style="width:100px;height:31px; border: 1px solid red;">
<a href="javascript:">二级div2</a>
</div>
</div>
</div>
</body>
</html>
备注:
1、本示例未关注样式
2、彩色标注突出重点
1、初始状态,效果
2、点击“显示或隐藏”连接,效果
3 、再次点击“显示或隐藏”连接,效果
二、实现代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>显示隐藏div</title>
<script type="text/javascript">
function isShowSecond(firstId,secondId){
var flag = document.getElementById(firstId).value;
if(flag == 'false'){
document.getElementById(secondId).style.display="";
document.getElementById(firstId).value="true";
}else{
document.getElementById(firstId).value="false";
document.getElementById(secondId).style.display="none";
}
}
</script>
</head>
<body>
<div style="width:150px;height:31px;border: 1px solid red;">
<input type="hidden" id="firstDiv"value="false" />
<a href="javascript:isShowSecond('firstDiv','secondDiv')" style="width:100px;height:31px; border: 1px solid red;">显示或隐藏
</a>
<div id="secondDiv" style="display: none; padding-left: 30px;">
<div style="width:100px;height:31px; border: 1px solid red;">
<a href="javascript:">二级div</a>
</div>
<div style="width:100px;height:31px; border: 1px solid red;">
<a href="javascript:">二级div2</a>
</div>
</div>
</div>
</body>
</html>
备注:
1、本示例未关注样式
2、彩色标注突出重点