实现折叠效果的JavaScript代码-CSDN博客

JavaScript可以实现丰富的网页显示效果，为了在Redmine中实现代码折叠，我在网上找了很久，最后终于发现一段JavaScript代码，可以作出折叠效果，实现起来也很简单，代码如下所示：

<!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> 
　　　　<title></title> 
　　　　<script type="text/javascript"> 
　　　　　　function toggle(sDivId) { 
　　　　　　　　var oDiv = document.getElementById(sDivId); 
　　　　　　　　oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none"; 
　　　　　　} 
　　　　</script> 
　　</head> 
　　<body> 
　　　　<div style="background-color:Blue;color:White;font-weight:bold;padding:10px;cursor:pointer" 
　　　　　　οnclick="toggle('divContent1')">Click Here</div> 
　　　　<div id="divContent1" style="border:3px solid blue;height:100px;padding:10px"> 
　　　　　　This is some content to show and hide. 
　　　　</div> 
　　　　<br /> 
　　　　<div style="background-color:Blue;color:White;font-weight:bold;padding:10px;cursor:pointer" 
　　　　　　οnclick="toggle('divContent2')">Click Here</div> 
　　　　<div id="divContent2" style="border:3px solid blue;height:100px;padding:10px"> 
　　　　　　This is some content to show and hide. 
　　　　</div> 
　　</body> 
</html>

这段代码利用了CSS的display特性，display的特性值有：none和block。none即为隐藏，block为显示。

显示区域分为两个区域：标题栏和内容区域。标题栏总是可见的，内容部分可以折叠或展开。在页面上，可以使用两个<div>元素分别实现这个设计。最后的显示效果如下图所示：

压缩时：

展开时：

应该说，JavaScript实现这样的效果是比较简单的，对应到Redmine要达到的效果，就是把代码分成两部分，分别用不同的<div>分开。一部分是两个版本代码不同的地方，固定显示，另一部分是两个版本代码相同的部分，由一个按钮控制，按下和松开分别对应显示和不显示。

现在Redmine的实现是直接不显示相同的部分，看源代码没有发现它是怎么省略不需要的部分的，要把这段JavaScript程序整合进Redmine还要进一步研究一下。

转载于:https://www.cnblogs.com/compulsive/archive/2011/08/30/2160197.html