最简洁的仿QQ折叠菜单的实现
最简洁的仿QQ折叠菜单的实现，学习编写折叠菜单的好示例，自己把CSS美化一下，还是不错的效果。
当前位置：编程学习 > JS >>
答案：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>最简洁的仿QQ折叠菜单的实现</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.hide{display:none;}
.show{display:block;}
.pointer{cursor:pointer;}
</style>
</head>
<body>
<table id="menu" width="200" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000">
<!--Begin #-->
<tr class="pointer" onclick="Menu(this);">
<td height="28" align="center">
<table width="150" border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td>网站相关</td>
</tr>
</table>
</td>
</tr>
<tr class="show">
<td align="center" valign="top">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td align="center">最新更新</td></tr>
<tr> <td align="center">浏览排行</td></tr>
</table>
</td>
</tr>
<!--End #-->
<!--Begin #-->
<tr class="pointer" onclick="Menu(this);">
<td align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td>ASP源码</td>
</tr>
</table>
</td>
</tr>
<tr class="hide">
<td align="center" valign="top">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">新闻文章</td></tr>
<tr><td align="center">论坛社区</td></tr>
</table>
</td>
</tr>
<!--End #-->
<!--Begin #-->
<tr class="pointer" onclick="Menu(this);">
<td align="center" >
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td>PHP源码</td>
</tr>
</table>
</td>
</tr>
<tr class="hide">
<td align="center" valign="top">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">Ajax相关</td></tr><tr><td align="center">聊天留言</td></tr>
</table>
</td>
</tr>
<!--End #-->
<!--Begin #-->
<tr class="pointer" onclick="Menu(this);">
<td align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td>演示菜单</td>
</tr>
</table>
</td>
</tr>
<tr class="hide">
<td align="center" valign="top">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">内容一</td>
</tr>
<tr>
<td align="center">内容二</td>
</tr>
</table>
</td>
</tr>
<!--End #-->
</table>
<script language="javascript">
function Menu(obj)
{
var tb=document.getElementById("menu");
for(i=0;i<8;i++)
{
if(i % 2 ==1)
{
tb.rows[i].className="hide";
}
}
if(obj.className="pointer" )
{
if(tb.rows(obj.rowIndex+1).className=="show")
{
tb.rows(obj.rowIndex+1).className="hide";
}
else
{
tb.rows(obj.rowIndex+1).className="show";
}
}
}
</script>
</body>
</html>上一个：鼠标滑过变色的菜单条
下一个：纯CSS仿Vista风格按钮菜单条
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js把图片转换成 base64代码
- js把base代码转换成图片
- JS 将 base64编码的图片转化为图片文件
- js中的定时器
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。