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 相关文章推荐
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
node.js express框架简介与实现
Jul 23 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 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与已存在的Java应用程序集成
2006/10/09 PHP
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
制作特殊字的脚本
2006/06/26 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
python 中文乱码问题深入分析
2011/03/13 Python
Python魔术方法详解
2015/02/14 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
python 读取文件并替换字段的实例
2018/07/12 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
巴黎一票通:The Paris Pass
2018/02/10 全球购物
猫咪家具:CatsPlay
2018/11/03 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
中专毕业生求职简历的自我评价
2013/10/21 职场文书
销售辞职报告范文
2014/01/12 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
学校安全防火方案
2014/06/07 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
培训班开班主持词
2015/07/02 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python