JavaScript纯文字折叠菜单
JavaScript纯文字折叠菜单，类似淘宝网一样的管理菜单，非常纯净，如果你想为每个菜单加上背景，你可以修改CSS中调用的一个GIF图，改变图片的样式就可以改变背景，实用方便。
当前位置：编程学习 > JS >>
答案：<html>
<head>
<title>折叠菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
<!--
function getObject(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId);
}
else if (document.all && document.all(objectId)) {
return document.all(objectId);
}
else if (document.layers && document.layers[objectId]) {
return document.layers[objectId];
}
else {
return false;
}
}
function showHide(e,objname){
var obj = getObject(objname);
if(obj.style.display == "none"){
obj.style.display = "block";
e.className="xias";
}else{
obj.style.display = "none";
e.className="rights";
}
}
-->
</script>
<style type="text/css">
body { font-size:12px; margin:20px; padding:0; text-align:left;}
dl,dt,dd,ul,ol,li,p,div,input,h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
li { list-style:none;}
.libiao_menu { margin-bottom:15px;}
.libiao_menu h3 a { margin-top:15px; margin-bottom:15px; display:block; width:130px; height:28px; font-size:14px; text-align:left; padding-left:65px; padding-top:13px; color:#0066cc;}
.libiao_menu dl { margin-left:30px; margin-top:5px;}
.libiao_menu dl dt { font-size:14px; line-height:24px;}
.libiao_menu dl dt a { padding-left:13px; color:#333;}
.libiao_menu dl dt a.rights { background:url(/jscss/demoimg/200905/dots.gif) no-repeat 0 3px;}
.libiao_menu dl dt a.xias { background:url(/jscss/demoimg/200905/dots.gif) no-repeat 0 -41px;}
.libiao_menu dl dd { padding-left:20px;}
.libiao_menu dl dd ul {}
.libiao_menu dl dd ul li { font-size:14px; line-height:24px;}
.libiao_menu dl dd ul li a { color:#06c;}
</style>
</head>
<body>
<div class="libiao_menu">
<dl>
<dt><a href="#" class="xias" onclick="showHide(this,'items0');">我的网上订单</a></dt>
<dd id="items0" style="display: block;">
<ul>
<li><a href="#">所有订单</a></li>
<li><a href="#">未付款订单</a></li>
<li><a href="#">处理中的订单</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="#" class="xias" onclick="showHide(this,'items1');">帐户管理</a></dt>
<dd id="items1" style="display: block;">
<ul>
<li><a href="#">我的余额</a></li>
<li><a href="#">管理地址</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="#" class="xias" onclick="showHide(this,'items2');">我的个人助手</a></dt>
<dd id="items2" style="display: block;">
<ul>
<li><a href="#">我的收藏夹</a></li>
<li><a href="#">我的购物记录</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="#" class="xias" onclick="showHide(this,'items3');">个人信息管理</a></dt>
<dd id="items3" style="display: block;">
<ul>
<li><a href="#">编辑资料</a></li>
<li><a href="#">修改密码</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>上一个：自己写的CSS+JS滑动门菜单
下一个：仿淘宝支付宝网站的漂亮导航菜单
- 更多JS疑问解答：
- 几个验证11位手机号码格式的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实现网页图片切换效果，出现边框，单击激活此控件。
- JS怎样操作PHP中的参数
- js 怎么在一打开页面就加载这个函数。
- Date.parse()的问题(js)
- <script src="/{maxcms:sitepath}js/common.js"></script>是什么意思