小弟我想要一种效果：用javascript 和div 实现展开和收缩 div 层的功能！100 分，必结贴
日期：2014-05-20 浏览次数：20415 次
我想要一种效果：用javascript 和div 实现展开和收缩 div 层的功能！100 分，必结贴！
假如 pub.aspx 页中有如下代码：
<tr>
<td colSpan= "2 ">
这里放一个按钮，控制以下 <div id= "divOrders "> 层的伸展与收缩
</td>
</tr>
<tr>
<td colSpan= "2 ">
<div id= "divOrders ">
<table>
<tr>
<td> 这里是工作单内容 </td>
</tr>
</table>
</div>
</td>
</tr>
------------------------------------------
我就是想通过 点击按钮,实现收缩与展开 div 层中的内容
， 要如何能办到呢？
------解决方案--------------------
function load(Div,image)
{
var a=document.getElementById(Div).style.display;
if(a== " ")
{
hiddena(Div,image);
}
else if(a== "none ")
{
showa(Div,image);
}
}
//////////////////////////////
/////////////////////////////////////
function hiddena(Div,image)
{
document.getElementById(Div).style.display= "none ";
document.getElementById(image).style.background= "url(image/ico_down.gif) no-repeat scroll right bottom ";
}
function showa(Div,image)
{
document.getElementById(Div).style.display= " ";
document.getElementById(image).style.background= "url(image/ico_up.gif) no-repeat scroll right bottom ";
}
------解决方案--------------------
<!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=gb2312 " />
<title> test </title>
</head>
<style>
.btn{width:60px;height:25px;padding-top:3px;border:1px solid #999999;background:#f0f0f0;}
</style>
<script>
function displayDiv(obj)
{
if(document.getElementById( "divOrders ").style.display== "none ")
{
document.getElementById( "divOrders ").style.display= "block ";
document.getElementById( "btnDisplay ").value= "隐藏 ";
}
else
{
document.getElementById( "divOrders ").style.display= "none ";
document.getElementById( "btnDisplay ").value= "显示 ";
}
}
</script>
<body>
<table width= "500 " border= "0 " cellspacing= "1 " cellpadding= "1 ">
<tr>
<td colSpan= "2 ">
<div>
<input type= "button " name= "btnDisplay " value= "隐藏 " onclick= "displayDiv(document.getElementById( 'divOrders ')) " class= "btn " />
假如 pub.aspx 页中有如下代码：
<tr>
<td colSpan= "2 ">
这里放一个按钮，控制以下 <div id= "divOrders "> 层的伸展与收缩
</td>
</tr>
<tr>
<td colSpan= "2 ">
<div id= "divOrders ">
<table>
<tr>
<td> 这里是工作单内容 </td>
</tr>
</table>
</div>
</td>
</tr>
------------------------------------------
我就是想通过 点击按钮,实现收缩与展开 div 层中的内容
， 要如何能办到呢？
------解决方案--------------------
function load(Div,image)
{
var a=document.getElementById(Div).style.display;
if(a== " ")
{
hiddena(Div,image);
}
else if(a== "none ")
{
showa(Div,image);
}
}
//////////////////////////////
/////////////////////////////////////
function hiddena(Div,image)
{
document.getElementById(Div).style.display= "none ";
document.getElementById(image).style.background= "url(image/ico_down.gif) no-repeat scroll right bottom ";
}
function showa(Div,image)
{
document.getElementById(Div).style.display= " ";
document.getElementById(image).style.background= "url(image/ico_up.gif) no-repeat scroll right bottom ";
}
------解决方案--------------------
<!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=gb2312 " />
<title> test </title>
</head>
<style>
.btn{width:60px;height:25px;padding-top:3px;border:1px solid #999999;background:#f0f0f0;}
</style>
<script>
function displayDiv(obj)
{
if(document.getElementById( "divOrders ").style.display== "none ")
{
document.getElementById( "divOrders ").style.display= "block ";
document.getElementById( "btnDisplay ").value= "隐藏 ";
}
else
{
document.getElementById( "divOrders ").style.display= "none ";
document.getElementById( "btnDisplay ").value= "显示 ";
}
}
</script>
<body>
<table width= "500 " border= "0 " cellspacing= "1 " cellpadding= "1 ">
<tr>
<td colSpan= "2 ">
<div>
<input type= "button " name= "btnDisplay " value= "隐藏 " onclick= "displayDiv(document.getElementById( 'divOrders ')) " class= "btn " />
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
