JS实现的竖向折叠菜单代码


Posted in Javascript onOctober 21, 2015

本文实例讲述了JS实现的竖向折叠菜单代码。分享给大家供大家参考,具体如下:

先来看看运行效果截图:

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>竖向的折叠菜单</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程序设计有所帮助。

Javascript 相关文章推荐
jquery 插件开发备注
Aug 27 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
javascript操作JSON的要领总结
Dec 09 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
使用JavaScript 实现的人脸检测
Mar 24 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
理解JavaScript原型链
Oct 25 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
JS基于Mootools实现的个性菜单效果代码
Oct 21 #Javascript
纯javascript实现自动发送邮件
Oct 21 #Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 #Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 #Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 #Javascript
chrome调试javascript详解
Oct 21 #Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 #Javascript
You might like
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
菜单效果
2006/10/14 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
使用K.function()调试keras操作
2020/06/17 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
高中生毕业学习总结的自我评价
2013/11/14 职场文书
善意的谎言事例
2014/02/15 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书