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 弹出登录窗口实现代码
Dec 24 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 Javascript
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程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
php多线程并发实现方法
2016/09/30 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
使用PHP开发留言板功能
2019/11/19 PHP
dojo 之基础篇
2007/03/24 Javascript
js 小数取整的函数
2010/05/10 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
Python FTP操作类代码分享
2014/05/13 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
Sql面试题
2013/03/20 面试题
大学生职业生涯设计书
2014/01/02 职场文书
承诺书的格式范文
2014/03/28 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
小学生节水倡议书
2015/04/29 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers