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中要包含一个id为level开头的image和一个onclick事件，ul中id要包含row，默认情况下是展开的，如果需要默认为闭合，则要在ul中加入style="display:none"
例子如下：
<body>
<divstyle="CURSOR: hand"
onclick="puckerMenu('1');"><IMGid=level1
src="images/minus.gif">public class DataAccess</div>
<ulid=row1>
<li> private string connString;
<divstyle="CURSOR: hand"
onclick="puckerMenu('2');"><IMGid=level2
src="images /plus.gif">protected DbConnection OpenConnection()</div>
<ulid=row2style="display:none">{...}</ul>
<li>
Other
</ul>
</body>
总结
以上就是本文的全部内容，希望对有需要的人能有所帮助。如果有疑问可以留言讨论。
-
本文向大家介绍Pycharm编辑器功能之代码折叠效果的实现代码，包括了Pycharm编辑器功能之代码折叠效果的实现代码的使用技巧和注意事项，需要的朋友参考一下 1、主题 在一些情况下，如果某些代码显得不太重要，我们可以通过Pycharm的代码折叠功能将其折叠为一行。在接下来的部分我们将介绍代码折叠功能基本用法。 2、代码可折叠轮廓线以及折叠开关 首先，我们观察一下代码左侧的折叠线。
-
我在寻找一种在Atom中使用C#regions之类的东西折叠JavaScript代码的方法： 我找不到这样的包裹。我知道你可以按CTRLAltF折叠所选代码。但我想要命名区域。 所以真正的问题是，有人知道我如何在原子中做到这一点吗？ 谢谢
-
我想请教一下，就是我这个用的andesign Table 组件 我想实现的功能是这个列表里面的表头里面的每一列加上表头都是可折叠的，有什么好的思路可以实现吗？又或者有没有其他方法可以解决这个业务问题。 业务解决问题：核心就是这个列表是动态列表表头是后端返回回来的，而且表头里面的每一项都很多，导致用户进来需要拉取滚动条比较麻烦。 自己的想法：我试过放大整个table，或者表头可收缩放大缩小，亦或者进
-
本文向大家介绍JS实现的竖向折叠菜单代码，包括了JS实现的竖向折叠菜单代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现的竖向折叠菜单代码。分享给大家供大家参考，具体如下： 先来看看运行效果截图： 在线演示地址如下： http://demo.jb51.net/js/2015/js-hxzd-menu-demo/ 具体代码如下： 希望本文所述对大家JavaScript程序设计有所帮
-
本文向大家介绍Bootstrap笔记—折叠实例代码，包括了Bootstrap笔记—折叠实例代码的使用技巧和注意事项，需要的朋友参考一下 1. 基础折叠 展示如下： 2. 折叠一组 3.折叠多组 4. 折叠多组 只显示一组折叠内容 5. 折叠–下拉菜单 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍JQuery实现折叠式菜单的详细代码，包括了JQuery实现折叠式菜单的详细代码的使用技巧和注意事项，需要的朋友参考一下 两种风格： 1：点菜单项，每个子菜单项都可显示 运行结果图： 2：点菜单项，仅当前子菜单项可显示，其余子菜单隐藏 运行结果图： 总结 到此这篇关于JQuery实现折叠式菜单的详细代码的文章就介绍到这了,更多相关jquery 折叠式菜单内容请搜索呐喊教程以前的文章或