javascript的accorddion成效(一)
日期：2014-05-16 浏览次数：20463 次
javascript的accorddion效果(一)
javascript的accorddion效果(一)
早年的时候的javascript积累，那个时候还很喜欢CSS和JS，呵呵，真实此一时，彼一时。
这个网站很好，虽然我已经决定用jquery了，但是这个网站也作为有时临时调用的效果资源站
http://www.dhtmlgoodies.com
demo页面
http://www.dhtmlgoodies.com/scripts/show-hide-content/show-hide-content.html
本机需求的测试静态页面sample.html如下：
<html>
<head>
<title> click slide</title>
<style type="text/css">
/* Layout properties for your question */
.question{
font-weight:bold; /* Bold font */
color: #FF8800; /* The questions is in red */
cursor:pointer; /* Cursor is like a hand when someone rolls the mouse over the question */
}
.answer{
/* Layout properties - You can change these */
border: 1px solid #555555;
padding:3px;
width:500px;
background-color:#E2EBED;
/* This one should not be changed */
display:none;
}
</style>
<script type="text/javascript">
function showHideAnswer()
{
var numericID = this.id.replace(/[^\d]/g,'');
var obj = document.getElementById('a' + numericID);
if(obj.style.display=='block'){
obj.style.display='none';
}else{
obj.style.display='block';
}
}
function initShowHideContent()
{
var divs = document.getElementsByTagName('DIV');
for(var no=0;no<divs.length;no++){
if(divs[no].className=='question'){
divs[no].onclick = showHideAnswer;
}
}
}
window.onload = initShowHideContent;
</script>
</head>
<body>
<div id="q1" class="question">领料工作台</div>
<div id="a1" class="answer">
<table>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>快捷方式一</td>
<td>快捷方式二</td>
<td>快捷方式三</td>
</tr>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>已完成一</td>
<td>已完成二</td>
<td>已完成三</td>
</tr>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>草稿一</td>
<td>草稿二</td>
<td>草稿三</td>
</tr>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>已经办理一</td>
<td>已经办理二</td>
<td>已经办理三</td>
</tr>
</table>
</div>
<div id="q2" class="question">库管员工作台</div>
<div id="a2" class="answer">
<table>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>快捷方式一</td>
<td>快捷方式二</td>
<td>快捷方式三</td>
</tr>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>已完成一</td>
<td>已完成二</td>
<td>已完成三</td>
</tr>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>草稿一</td>
<td>草稿二</td>
<td>草稿三</td>
</tr>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>已经办理一</td>
<td>已经办理二</td>
<td>已经办理三</td>
</tr>
</table>
</div>
</body>
</html>
javascript的accorddion效果(一)
早年的时候的javascript积累，那个时候还很喜欢CSS和JS，呵呵，真实此一时，彼一时。
这个网站很好，虽然我已经决定用jquery了，但是这个网站也作为有时临时调用的效果资源站
http://www.dhtmlgoodies.com
demo页面
http://www.dhtmlgoodies.com/scripts/show-hide-content/show-hide-content.html
本机需求的测试静态页面sample.html如下：
<html>
<head>
<title> click slide</title>
<style type="text/css">
/* Layout properties for your question */
.question{
font-weight:bold; /* Bold font */
color: #FF8800; /* The questions is in red */
cursor:pointer; /* Cursor is like a hand when someone rolls the mouse over the question */
}
.answer{
/* Layout properties - You can change these */
border: 1px solid #555555;
padding:3px;
width:500px;
background-color:#E2EBED;
/* This one should not be changed */
display:none;
}
</style>
<script type="text/javascript">
function showHideAnswer()
{
var numericID = this.id.replace(/[^\d]/g,'');
var obj = document.getElementById('a' + numericID);
if(obj.style.display=='block'){
obj.style.display='none';
}else{
obj.style.display='block';
}
}
function initShowHideContent()
{
var divs = document.getElementsByTagName('DIV');
for(var no=0;no<divs.length;no++){
if(divs[no].className=='question'){
divs[no].onclick = showHideAnswer;
}
}
}
window.onload = initShowHideContent;
</script>
</head>
<body>
<div id="q1" class="question">领料工作台</div>
<div id="a1" class="answer">
<table>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>快捷方式一</td>
<td>快捷方式二</td>
<td>快捷方式三</td>
</tr>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>已完成一</td>
<td>已完成二</td>
<td>已完成三</td>
</tr>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>草稿一</td>
<td>草稿二</td>
<td>草稿三</td>
</tr>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>已经办理一</td>
<td>已经办理二</td>
<td>已经办理三</td>
</tr>
</table>
</div>
<div id="q2" class="question">库管员工作台</div>
<div id="a2" class="answer">
<table>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>快捷方式一</td>
<td>快捷方式二</td>
<td>快捷方式三</td>
</tr>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>已完成一</td>
<td>已完成二</td>
<td>已完成三</td>
</tr>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>草稿一</td>
<td>草稿二</td>
<td>草稿三</td>
</tr>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>已经办理一</td>
<td>已经办理二</td>
<td>已经办理三</td>
</tr>
</table>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
