JS实现菜单收缩
<html>
<title>javascript MenuTest</title>
<head>
<script type="text/javascript" src ="Menu.js"></script>
</head>
<body>
<table width="174">
<tr>
<td bgcolor="#99CCFF"><a href="javascript:showMenu(lay0)">language</a></td>
</tr>
<tr id="lay0" style="display:none;">
<td>
<table width="100%" border="0" cellspacing="0">
<tr>
<td width="20%"></td>
<td width="80%"><a href="" target="_blank">JAVA</a></td>
</tr>
<tr>
<td width="20%"></td>
<td width="80%"><a href="" target="_blank">Ruby</a></td>
</tr>
<tr>
<td width="20%"></td>
<td width="80%"><a href="" target="_blank">C</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#99CCFF"><a href="javascript:showMenu(lay1)">Flash</a></td>
</tr>
<tr id="lay1" style="display:none;">
<td>
<table width="100%" border="0" cellspacing="0">
<tr>
<td width="20%"></td>
<td width="80%"><a href="" target="_blank">FLASH - 1</a></td>
</tr>
<tr>
<td width="20%"></td>
<td width="80%"><a href="" target="_blank">FLASH - 2</a></td>
</tr>
<tr>
<td width="20%"></td>
<td width="80%"><a href="" target="_blank">FLASH - 3</a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
function showMenu(strID){
var i;
for(i=0;i<2;i++){
var lay;
lay = eval('lay' + i);
if (lay.style.display=="block" && lay != eval(strID)){
lay.style.display = "none";
}
}
if (strID.style.display=="none"){
strID.style.display = "block";
}else{
strID.style.display = "none";
}
}
分享到：
相关推荐
### js实现收缩菜单的知识点详解 #### 一、概述 在现代Web开发中，特别是企业级应用中，收缩菜单（也称作折叠菜单）是一种非常实用且常见的UI设计模式。它能够有效地节省屏幕空间，特别是在小屏幕设备上，提供更...
div+css+js实现菜单的收缩与展开
我们可以使用`addEventListener`方法监听用户的点击事件，当事件触发时执行相应的JavaScript函数，实现菜单的展开或收缩。同时，为了提高用户体验，我们可能还需要考虑防止连续点击导致的多次执行问题，这时可以使用...
在网页设计和开发中，创建一个可伸展和收缩的侧边栏菜单是常见的需求，尤其是在响应式设计中。这个项目使用了jQuery和Bootstrap这两个强大的工具来实现这一功能。jQuery是一个轻量级、功能丰富的JavaScript库，而...
"简单的菜单收缩代码"这个主题主要关注如何通过编程实现这一功能。下面将详细介绍这一知识点。 首先，菜单收缩通常涉及到前端开发，特别是HTML、CSS和JavaScript的运用。HTML用于创建菜单的基本结构，CSS负责样式...
4. **动画效果**：如果希望菜单收缩和展开时有平滑过渡，可以使用CSS3的`transition`属性，或者使用JavaScript库如jQuery的动画功能。 5. **状态存储**：为了保持菜单的状态（收缩或展开），可以使用`localStorage`...
最后，`js`文件可能包含了菜单交互的JavaScript代码。JavaScript通常用于处理用户的点击事件，当用户点击菜单按钮时，切换菜单的状态。可以使用`classList.add()`和`classList.remove()`方法来添加或移除类名，从而...
在这个“js实现的可伸缩的级联菜单”项目中，开发者使用JavaScript这一强大的客户端脚本语言，构建了一个动态的、可扩展的级联菜单系统。 JavaScript是一种轻量级的解释型编程语言，主要应用于网页和网络应用的交互...
总的来说，layui侧边收缩菜单的实现涉及到HTML结构设计、layui模块的使用，以及JavaScript事件处理。通过合理布局和有效的交互设计，我们可以创建一个既美观又实用的侧边栏菜单，适应各种设备和用户需求。
在实现这样的导航菜单时，JavaScript（简称JS）起到了关键作用。JavaScript是一种客户端脚本语言，可以直接在用户的浏览器上运行，提供了丰富的交互性。以下是一些关于这个功能的重要知识点： 1. **DOM操作**：...
在JavaScript（JS）中实现侧边隐藏菜单收缩特效是一项常见的前端开发任务，它涉及到DOM操作、事件监听以及CSS样式变换。下面将详细讲解这个过程，以及如何从提供的资源中理解和应用这些知识。 首先，让我们理解标题...
为了实现上述功能，你可以参考压缩包中的“加强版三级收缩菜单（三种类型）”文件，里面可能包含了HTML、CSS和JavaScript代码示例，通过分析和修改这些代码，可以根据自己的项目需求进行定制。 总的来说，一个良好...
根据提供的文件信息，我们可以分析出该段代码是用于在JSP页面中实现菜单收缩功能的。这段代码通过JavaScript实现，并且特别注意到了浏览器兼容性问题，主要针对Internet Explorer（IE）进行了一些特定处理。下面我们...
本文将深入探讨如何使用JavaScript来实现这种收缩式导航菜单。 首先，我们需要创建HTML结构。一个简单的收缩式导航菜单可能包含一个`<nav>`元素，里面有一些`<ul>`列表项，列表项可以进一步包含子菜单的`<ul>`。...
这部分代码负责处理用户交互，例如监听点击事件，根据事件触发相应的菜单收缩或展开动作。使用jQuery，我们可以很容易地选择元素（`$("#menu")`）、添加或移除类（`.addClass()`, `.removeClass()`），或者更改CSS...
"JS树形结构菜单展开收缩代码"就是利用Vue.js的特性来实现一个可动态展开和收缩的树形菜单。 首先，Vue.js的组件化设计是实现这一功能的基础。每个菜单项可以被视为一个独立的组件，包含其自身的状态（如是否展开）...
然后，我们可以编写jQuery代码来实现菜单的展开和收缩。这里的核心是使用`.click()`事件监听器和`.slideToggle()`方法： ```javascript $(document).ready(function() { $("#menu ul li:has(ul)").click(function...