脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS竖向折叠菜单

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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • JavaScript异步上传图片文件的实例代码

    JavaScript异步上传图片文件的实例代码

    本文通过实例代码给大家介绍了js异步上传图片文件的方法，包括html和jquery代码，需要的的朋友参考下吧
    2017-07-07
  • Js base64 加密解密介绍

    Js base64 加密解密介绍

    想必大家对base64并不陌生吧，在本文将为大家介绍下Js中的base64加密解密过程，感兴趣的朋友不要错过
    2013-10-10
  • three.js响应式设计实例详解

    three.js响应式设计实例详解

    响应式网站设计(Responsive Web design)是一种网络页面设计布局,是目前比较流行的一种网页设计,下面这篇文章主要给大家介绍了关于three.js响应式设计的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • 详解如何在TypeScript中声明全局变量

    详解如何在TypeScript中声明全局变量

    本文主要介绍了如何在 TypeScript 中声明全局变量,在TypeScript中,可以使用declare关键字来声明全局变量,这样的声明告诉编译器该变量是在其他地方定义的,而不需要实际的实现,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • js实现简单模态窗口，背景灰显

    js实现简单模态窗口，背景灰显

    昨天中午做项目需要一个模态窗口，想起上一个公司的项目经理曾经做过一个比较牛的模态窗口，至今没用搞清楚实现原理，平时也没有时间去分析，试着自己做了一个，用了一天的时间终于完成了，给大家一起分享， 也希望高手多提意见。第一次在博客园上发文章，挺高兴的。
    2008-11-11
  • 使用javascript实现一个在线RGB颜色转换器

    使用javascript实现一个在线RGB颜色转换器

    目前已经有很多网页版在线小工具,之前很多窗体化的工具也逐渐网页化,比如：PS画图软件,也都能直接网页化进行设计,由于自己实际项目经常会用到颜色转换,所以直接自己开发个简单版的在线颜色转换小工具,需要的朋友可以参考下
    2024-01-01
  • 详解js常用分割取字符串的方法

    详解js常用分割取字符串的方法

    这篇文章主要介绍了js常用分割取字符串的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • js canvas实现5张图片合成一张图片

    js canvas实现5张图片合成一张图片

    这篇文章主要为大家详细介绍了js canvas实现5张图片合成一张图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 捕获未处理的Promise错误方法

    捕获未处理的Promise错误方法

    下面小编就为大家带来一篇捕获未处理的Promise错误方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • javascript removeChild 导致的内存泄漏

    javascript removeChild 导致的内存泄漏

    最近看到司徒正美的一篇文章《移除DOM节点》，文中说到在IE中移除容器类节点，会引起内存泄露。
    2010-08-08

最新评论