代码如下:<mce language=”javascript”><!– var count=0;//做计数器 var limit=new Array();//用于记录当前显示的哪几个菜单 var countlimit=1;//同时打开菜单数目，可自定义 function expandIt(el) { obj = eval(“” + el); if (obj.style.display == “none”) { obj.style.display = “block”;//显示子菜单 if (count<countlimit) {//限制2个 limit[count]=el;//录入
在这个“单击按钮显示隐藏子菜单经典案例”中，我们主要关注的是JavaScript代码实现的交互功能，特别是与按钮、数组和菜单相关的编程概念。以下是详细的知识点解析：
1. **计数器（Counters）**：
在JavaScript中，`count`变量被用作计数器，用于跟踪当前打开的菜单数目。初始化为0，每打开一个菜单，计数值增加1；关闭一个菜单时，计数值减1。
2. **数组（Arrays）**：
`limit`数组是用来记录当前显示的子菜单元素的引用。当用户打开一个菜单时，该菜单的ID会被添加到`limit`数组中；当关闭一个菜单时，相应的ID会从数组中移除。数组在这里起到了记忆功能，帮助跟踪用户操作的状态。
3. **同时打开菜单数目**：
变量`countlimit`定义了可以同时打开的菜单数目，初始值为1。这有助于控制用户体验，避免一次性显示过多的子菜单，导致页面过于拥挤。
4. **函数（Functions）**：
`expandIt(el)`是核心函数，它接收一个参数`el`，代表用户点击的按钮或菜单的ID。函数首先检查对应的菜单是否已显示，然后根据计数器和限制条件执行相应的操作：显示或隐藏菜单，并更新`limit`数组。
5. **对象访问（Object Access）**：
使用`eval()`函数动态获取DOM对象，这是通过字符串形式的ID来操作对象的一种方式。虽然`eval()`在某些情况下可能带来安全风险，但在这个简单的示例中，它简化了代码并实现了预期的功能。
6. **条件语句（Conditional Statements）**：
代码中使用了`if...else`结构来判断当前菜单是打开还是关闭状态，并执行相应的操作。此外，还使用了`for`循环来处理数组中的元素，如移动和删除元素。
7. **数组操作**：
- `limit[count]=el;`：将打开的菜单ID添加到数组末尾。
- `for (i=0;i<limit.length-1;i++) {limit[i]=limit[i+1];}`：移除数组头元素并将其余元素前移一位。
- `limit[limit.length-1]=null;`：清空数组的最后一个元素。
- `for (i=j;i<limit.length-1;i++) {limit[i]=limit[i+1];}`：当关闭一个菜单时，将数组中之后的所有元素前移一位，以填补被移除的ID。
8. **事件处理**：
这段代码未直接展示事件绑定部分，但通常按钮的点击事件（`onclick`）会调用`expandIt()`函数，传递被点击按钮的ID作为参数。
总结起来，这个案例展示了如何使用JavaScript进行交互式UI设计，利用计数器、数组和条件逻辑来管理子菜单的显示和隐藏状态，同时限制同时可见的子菜单数量。这种技术广泛应用于下拉菜单、导航栏和各种需要动态显示/隐藏内容的场景。
