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 相关文章推荐
利用json获取字符出现次数的代码
Mar 22 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
vue中使用codemirror的实例详解
Nov 01 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 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代码
2007/03/03 PHP
服务器web工具 php环境下
2010/12/29 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
php批量删除操作代码分享
2017/02/26 PHP
PHP7修改的函数
2021/03/09 PHP
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
python显示天气预报
2014/03/02 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
Python如何实现FTP功能
2020/05/28 Python
如何用Python绘制3D柱形图
2020/09/16 Python
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
和谐社区口号
2014/06/19 职场文书
年会邀请函范文
2015/01/30 职场文书
员工辞职信范文
2015/03/02 职场文书
SQLServer之常用函数总结详解
2021/08/30 SQL Server
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android