伸缩菜单栏

点击标题时判断该标题下的菜单是否显示，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    *{margin:0;

     padding:0;

     font-size:13px;

     list-style:none;}

.menu{width:210px;

      margin:50px auto;

      border:1px solid #ccc;}

.menu p{height:25px;

        line-height:25px;

        font-weight:bold;

        background:#eee;

        border-bottom:1px solid #ccc;

        cursor:pointer;

        padding-left:5px;}

.menu div ul{display:none;}

.menu li{height:24px;

         line-height:24px;

         padding-left:5px;}

</style>

    <script type="text/javascript">

    window.onload=function(){

      // 将所有点击的标题和要显示隐藏的列表取出来

    var ps = document.getElementsByTagName("p");

    var uls = document.getElementsByTagName("ul");

     // 遍历所有要点击的标题且给它们添加索引及绑定事件

    for(var i = 0, n = ps.length; i <n; i += 1){

        ps[i].id = i;

        ps[i].onclick = function(){

            for(var j = 0; j < n ; j += 1){

               uls[j].style.display = "none";

            }

            uls[this.id].style.display = "block";

        }

     // 获取点击的标题上的索引属性，根据该索引找到对应的列表

    }

     // 判断该列表，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来

 }

    </script>

</head>

<body>

    <div class="menu" id="menu">

        <div>

            <p>Web前端</p>

            <ul style="display:block">

                <li>JavaScript</li>

                <li>DIV+CSS</li>

                <li>jQuery</li>

            </ul>

        </div>

        <div>

            <p>后台脚本</p>

            <ul>

                <li>PHP</li>

                <li>ASP.net</li>

                <li>JSP</li>

            </ul>

        </div>

        <div>

            <p>前端框架</p>

            <ul>

                <li>Extjs</li>

                <li>Esspress</li>

                <li>YUI</li>

            </ul>

        </div>

    </div>

</body>

</html>

实例效果：

版权声明：本文为小平果原创文章，转载请注明：http://blog.csdn.net/i10630226

超实用的JavaScript代码段 Item2 --伸缩菜单栏的更多相关文章

  1. 前端福利！10个短小却超实用的JavaScript 代码段

    JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高 性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaS ...

  2. 推荐10 个短小却超实用的 JavaScript 代码段

    1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.jQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需 ...

  3. 《超实用的JavaScript代码段》—— 读后总结

    这本书全是代码,从头到尾跟着坐下来确实收获很多.比那些古板的教科书式的理解更多,不过书中并不是每个例子都做了,有的作者封装的太多,觉得看了收获不多,就没细看——比如模块渐变.有空好好学学这段的代码. ...

  4. 超实用的JavaScript代码段

    1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.JQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需 ...

  5. 超实用的JavaScript代码段 --倒计时效果

    现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...

  6. 超实用的JavaScript代码段 Item4 --发送短信验证码

    发送短信验证码 实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”.“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”.在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件 ...

  7. 超实用的JavaScript代码段 Item8 -- js对象的(深)拷贝

    js 对象 浅拷贝 和 深拷贝 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: var Chinese = { nation:'中国' } var Doctor ...

  8. 超实用的JavaScript代码段 Item3 --图片轮播效果

    图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...

  9. 超实用的JavaScript代码段 Item1 --倒计时效果

    现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...

随机推荐

  1. WinCE上BINFS实现详解

    网上不少介绍三星24x0系列的BINFS启动方式实现,有些内容上描述的不是非常全面 下面就WinCE6上的BINFS实现,从基本原理到修改BSP,再到如何烧录启动做一个较全面的讲解 一 BINFS到底 ...

  2. 数据包接收系列 — IP协议处理流程（二）

    本文主要内容:在接收数据包时,IP协议的处理流程. 内核版本:2.6.37 Author:zhangskd @ csdn blog 我们接着来看数据包如何发往本地的四层协议. ip_local_del ...

  3. Oracle Global Finanicals Technical Reference（二）

    Skip Headers Oracle Global Finanicals Oracle Global Financials Technical Reference Manual Release 11 ...

  4. Linux Framebuffer驱动剖析之一—软件需求

    嵌入式企鹅圈将以本文作为2015年的终结篇,以回应第一篇<Linux字符设备驱动剖析>.嵌入式企鹅圈一直专注于嵌入式Linux和物联网IOT两方面的原创技术分享,稍后会发布嵌入式企鹅圈的2 ...

  5. Linux文件系统及常用命令

    Linux文件系统介绍: 一 .Linux文件结构 文件结构是文件存放在磁盘等存贮设备上的组织方法.主要体现在对文件和目录的组织上.目录提供了管理文件的一个方便而有效的途径. Linux使用树状目录结 ...

  6. javascript显式类型转换

    尽管js可以做许多自动类型转换,但某些时候仍然需要做显示类型转换或为了代码逻辑清晰易读而做显示类型转换. 做显示类型转换最简单的方法就是用Boolean().Number().String()或Obj ...

  7. 使用Interlocked在多线程下进行原子操作，无锁无阻塞的实现线程运行状态判断

    巧妙地使用Interlocked的各个方法,再无锁无阻塞的情况下判断出所有线程的运行完成状态. 昨晚耐着性子看完了clr via c#的第29章<<基元线程同步构造>>,尽管这 ...

  8. Integer 和int 比较

    在jdk1.5的环境下,有如下4条语句: 1 2 3 4 Integer i01 = 59; int i02 = 59; Integer i03 =Integer.valueOf(59); Integ ...

  9. 一个基础的for循环面试题

    下面的这段程序主要考察的就是for循环的基础,输出什么?????? [html] view plaincopyprint? public class test { /** * @param args ...

  10. Oracle面试过程中常见的二十个问题

    1.冷备份和热备份的不同点以及各自的优点  解答:热备份针对归档模式的数据库,在数据库仍旧处于工作状态时进行备份.而冷备份指在数据库关闭后,进行备份,适用于所有模式的数据库.热备份的优点在于当备份时, ...