一、效果展示
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、彩色标注突出重点
1603
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
