惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

月光博客
月光博客
MyScale Blog
MyScale Blog
博客园 - Franky
The Cloudflare Blog
IT之家
IT之家
Blog — PlanetScale
Blog — PlanetScale
博客园 - 聂微东
WordPress大学
WordPress大学
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
T
The Blog of Author Tim Ferriss
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
罗磊的独立博客
Google DeepMind News
Google DeepMind News
P
Proofpoint News Feed
Martin Fowler
Martin Fowler
aimingoo的专栏
aimingoo的专栏
J
Java Code Geeks
腾讯CDC
雷峰网
雷峰网
Microsoft Azure Blog
Microsoft Azure Blog
G
Google Developers Blog
博客园 - 【当耐特】
美团技术团队
云风的 BLOG
云风的 BLOG

博客园 - FrankFei

创采人力资源管理软件--产品简介 创采e-HR荣获江苏省高新技术产品认定 个人经典收藏网址 创采人事档案管理系统(ASP.NET+ExtJS) 创采应用框架开发平台--CFrame 创采人事管理软件--分布式的人力资源管理解决方案 创采e-HR合作经营 创采人事管理软件 创采人力资源管理系统 使用.Net和ExtJS技术开发的人力资源管理系统 ObjectBuilder中WeakRefDictionary使用模式浅析 ObjectBuilder应用之TypeMappingPolicy、SingletonPolicy ObjectBuilder中IBuilderPolicy和IBuilderStrategy之区别 ObjectBuilder模式浅析 NHibernate连接多数据库字符定义问题 优化GridView的查询、翻页性能 名言警句 [转]NUnit2.0详细使用方法 设计模式--Prototype
折叠内容
FrankFei · 2007-06-14 · via 博客园 - FrankFei
 

大家在使用Visual Studio环境进行开发时,可以把某个类或某个函数折叠起来,在很多网页上也有类似的功能,像cnblogs中的代码段,那到底是如何实现的呢?其实很简单,只要通过JavaScript就可以实现。

首先定义一个JavaScript function,如下:

function puckerMenu(level) {

 var levelLength = ('row' + level).length;

 var toDo = '0';

 for (var iCount = 0 ; iCount < document.all.length; iCount++){

    if ( document.all[iCount].id.indexOf('row' + level) > -1 && ( document.all[iCount].id.length > levelLength)) {

      if ( document.all('level' + level).src.indexOf('minus.gif') > -1 ) {

        document.all[iCount].style.display = 'none';   

        toDo = '1';

      } else {

        document.all[iCount].style.display = 'block';

        toDo = '0';

      }

    }  

 }

 if ( toDo == '1' ) {

    document.all('level' + level).src = 'images/plus.gif';   

 } else {

    document.all('level' + level).src = 'images/minus.gif';  

 }

}

然后在网页上定义一个div和一个ul,注意div中要包含一个idlevel开头的image和一个onclick事件,ulid要包含row,默认情况下是展开的,如果需要默认为闭合,则要在ul中加入style="display:none",例子如下:

<body>

    <div style="CURSOR: hand"

                  onclick="puckerMenu('1');"><IMG id=level1

                  src="images/minus.gif">public class DataAccess</div>

    <ul id=row1 >

        <li> private string connString;

        <div style="CURSOR: hand"

                  onclick="puckerMenu('2');"><IMG id=level2

                  src="images /plus.gif">protected DbConnection OpenConnection()</div>

        <ul id=row2 style="display:none">{...}</ul>

            <li>

        Other

    </ul>

</body>