JS实现的竖向折叠菜单代码
更新时间：2015年10月21日 11:02:20 作者：企鹅
这篇文章主要介绍了JS实现的竖向折叠菜单代码,涉及JavaScript动态遍历页面元素及样式修改的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS实现的竖向折叠菜单代码。分享给大家供大家参考，具体如下：
先来看看运行效果截图：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-hxzd-menu-demo/
具体代码如下：
<!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>竖向的折叠菜单</title>
<script language = JavaScript>
function showmenu(id) {
var list = document.getElementById("list"+id);
var menu = document.getElementById("menu"+id)
if (list.style.display=="none") {
document.getElementById("list"+id).style.display="block";
menu.className = "title1";
}else {
document.getElementById("list"+id).style.display="none";
menu.className = "title";
}
}
</script>
<style type="text/css">
<!--
*{margin:0;padding:0;list-style:none;font-size:14px}
#nav{margin:10px;text-align:center;line-height:25px;width:200px;}
.title{background:#336699;color:#fff;border-bottom:1px solid #fff;cursor:pointer;}
.title1{background:#888;color:#000;border-bottom:1px solid #666;cursor:pointer;}
.content li{color:#336699;background:#ddd;border-bottom:1px solid #fff;}
-->
</style>
</head>
<body>
<div id="nav">
<div class="title" id="menu1" onclick="showmenu('1') ">Ajax下载</div>
<div id="list1" class="content" style="display:none">
<ul>
<li>jQuery</li>
<li>Extjs</li>
<li>Mootools</li>
</ul>
</div>
<div class="title" id="menu2" onclick="showmenu('2')">网页代码</div>
<div id="list2" class="content" style="display:none">
<ul>
<li>菜单导航</li>
<li>层和布局</li>
<li>图片切换</li>
</ul>
</div>
</div>
</body>
</html>
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要源码解读了Bootstrap排版，介绍了Bootstrap排版的使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
js实现banner图片轮播效果，通过鼠标点击左右可切换图片，具体实现代码大家参考下本文2017-08-08
这篇文章主要介绍了JavaScript实现基于Cookie的存储类,实例分析了javascript通过cookie实现数据存储的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了js检测数组类型的方法小结,有instanceof方法Array.isArray() 方法和Object.prototype.toString.call()方法，都是比较常用的，需要的朋友可以参考下2017-03-03
这篇文章主要介绍了JS简单测试循环运行时间的方法,涉及针对javascript中for循环、for...in循环及foreach循环的相关使用方法及运行时间测试,需要的朋友可以参考下2016-09-09
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
这篇文章主要介绍了在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入),本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-07
这篇文章主要介绍了js实现选中复选框文字变色的方法,涉及javascript鼠标事件及页面元素的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了JavaScript实现打字游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-02-02
这篇文章主要介绍了微信小程序缓存过期时间的使用详情，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
给政府做的，完全要求高，居然用硬盘序列号，MAC地址，CPU地址三项来绑定指定的人来操作。2008-12-12
最新评论