大家在使用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中要包含一个id为level开头的image和一个onclick事件，ul中id要包含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>
分享到：
相关推荐
在JavaScript编程中，创建可折叠的树型目录菜单是一项常见的任务，尤其在网站导航或文件管理系统中非常实用。本项目通过结合HTML、CSS和JavaScript技术，实现了一个动态、交互式的树形菜单。以下是对这个压缩包文件...
在本文中，我们将深入探讨如何使用原生JavaScript创建一个功能完备的左侧浮动可折叠的在线客服系统。在线客服是现代网站的重要组成部分，它为用户提供即时的互动支持，提高客户满意度和转化率。JavaScript作为一种...
原生js制作左侧浮动可折叠在线客服代码.zip
4. **函数封装**：将常见的菜单操作封装成函数，提高代码复用性，如`toggleSubMenu()`用于切换子菜单的状态。 5. **异步请求**：如果菜单内容需要动态加载，可以使用`fetch`或`XMLHttpRequest`进行Ajax请求，从...
以上就是使用jQuery制作侧边悬浮折叠影藏弹窗特效的基本步骤。通过调整CSS样式和增强功能，你可以根据项目需求定制更个性化的弹窗效果。记住，良好的用户界面和交互体验对于任何网站来说都是至关重要的，因此这类...
1. **滑动菜单**：通过JavaScript可以创建响应式导航菜单，实现下拉、折叠和滑动效果。 2. **轮播图**：自动切换图片或内容的展示，通常伴有左右箭头控制和指示点。 3. **淡入淡出效果**：用于图片切换或内容显示，...
JavaScript是网页制作中不可或缺的一部分，它为网页增添了交互性和动态性。这个压缩包中的内容显然是一些精心挑选的JavaScript功能代码片段，可以帮助开发者快速实现一些常见的网页特效和功能。接下来，我们将深入...
JavaScript可以处理用户输入、控制多媒体、进行动画制作以及与服务器进行异步通信等，极大地提升了用户体验。这些特效不仅包括简单的页面元素操作，如淡入淡出、滑动效果，还包括复杂的交互设计，如轮播图、下拉菜单...
在本实践项目“js练习4：制作凡客诚品帮助中心页面”中，我们将深入学习JavaScript语言，并结合HTML和CSS来构建一个类似凡客诚品（Vancl）在线购物平台的帮助中心页面。这个项目旨在提升JavaScript编程技能，尤其是...
JavaScript（简称JS）是一种轻量级的解释型编程语言，广泛应用于网页和互联网应用开发，包括创建动态内容、处理用户事件、与服务器进行异步通信等。在本案例中，我们讨论的是如何使用JS来创建一个树形菜单，这种菜单...
在网站制作中，JS特效代码能够帮助开发者实现各种酷炫的功能和视觉效果。以下是对"31个网站制作中有用的JS特效代码5"的详细解读： 1. **导航菜单动画**：JS可以实现导航菜单的动态展开和收起，增加用户的操作体验，...
本资源“31个网站制作中有用的JS特效代码1”集合了一组实用的JS代码片段，旨在帮助开发者在创建网站时提升用户体验和视觉效果。下面，我们将详细探讨这些JS特效代码可能涵盖的知识点。 1. **动画效果**：JS可以实现...
最后，关于压缩包中的"折叠菜单"文件，这很可能是包含示例代码的文件，可能包括HTML文件（如`index.html`）、CSS文件（如`styles.css`）和JavaScript文件（如`script.js`）。通过查看和运行这些文件，你可以更直观地...
在实际应用中，这种弹出式菜单可以进一步优化，比如增加动画效果使得展开和折叠过程更加平滑，或者使用更高级的库（例如jQuery）来简化DOM操作和事件处理，以提高代码的可读性和可维护性。 总结来说，这篇文档通过...
分析这两个文件的源代码，可以深入理解JavaScript实现树形菜单的各种方法和技术。 总之，JavaScript和CSS结合可以创造出功能丰富、交互性强的树形菜单。通过学习和实践这些示例，开发者能够提升在网页开发中构建...
此外，JS还可以制作弹窗广告，适时出现并引导用户进行特定操作，如订阅、购买或参与活动。不过，要注意平衡广告的吸引力和用户体验，避免过于频繁或打扰用户的浏览。 这些JS特效不仅提升了网页的视觉吸引力，还提高...
为了实现折叠和展开的功能，你需要使用JavaScript（通常与jQuery库配合使用，但也可以使用原生JS）。监听按钮的点击事件，然后改变子菜单的`display`属性。 ```javascript $(document).ready(function() { $('....
网页制作实用代码是每个网页开发者都需要掌握的基础技能，这些代码片段可以帮助我们快速构建美观且功能齐全的网站。在本资源包中，包含了多个与网页制作相关的实用代码示例，让我们一一解析它们的重要性和应用场景。...
例如，要支持JavaScript和Python，你需要引入对应的模式文件`mode/javascript/javascript.js`和`mode/python/python.js`。通过API调用，你可以初始化编辑器实例，绑定到特定的HTML元素上。 总的来说，CodeMirror是...
在网页制作中，尤其是对于内容丰富的网站，折叠菜单能帮助用户快速找到所需信息，同时保持页面整洁。本篇文章将详细介绍如何使用Dreamweaver制作折叠菜单。 首先，我们需要了解折叠菜单的基本原理，它是通过HTML中...