伸缩菜单栏

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

<!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. IOS动画（Core Animation）总结 （参考多方文章）

    一.简介 iOS 动画主要是指Core Animation框架.官方使用文档地址为:Core Animation Guide. Core Animation是IOS和OS X平台上负责图形渲染与动画的 ...

  2. Gradle 1.12用户指南翻译——第四十四章. 分发插件

    本文由CSDN博客貌似掉线翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...

  3. PS 色调——老照片效果

    这就是通过调色使照片显得发黄. R_new=0.393*R+0.769*G+0.189*B; G_new=0.349*R+0.686*G+0.168*B; B_new=0.272*R+0.534*G+ ...

  4. Hadoop RPC

    hadoop rpc机制 && 将avro引入hadoop rpc机制初探 1 RPC RPC(Remote Procedure Call)--远程过程调用,它是一种通过网络从远程计算 ...

  5. SharePoint 搜索爬网第三方网站配置

    介绍:SharePoint的搜索着实强大,而且最近用到SharePoint搜索第三方爬网,感觉收获挺大,而且网上资料没找到太多类似的,就小记录一下,分享给大家. 首先,我自己写了一个net页面,里面读 ...

  6. how tomcat works 读书笔记 十一 StandWrapper 上

    方法调用序列 下图展示了方法调用的协作图:  这个是前面第五章里,我画的图:  我们再回顾一下自从连接器里  connector.getContainer().invoke(request, resp ...

  7. rails自动生成大量记录的方法

    因为我们可能rails new了一个网站出来,但是里面没有测试数据,我们不能傻乎乎的在new.html.erb里面一个的手动输入吧?于是我们可以写一个小的脚本来帮助在数据库中插入大量数据:高版本的ra ...

  8. iOS中用UILabel实现UITextView的占位文字

    @interface BSPublishTextView : UITextView /** 对外属性占位字符 placeholder */ @property (nonatomic, copy) NS ...

  9. azkaban的安装部署

    一.所需环境 1,JDK 2,HADOOP 4,mysql 3,HIVE 二.安装azkaban 1,安装git命令: yum install git 2,下载azkaban源码:git clone ...

  10. remove Nth Node from linked list从链表中删除倒数第n个元素

    Given a linked list, remove the nth node from the end of list and return its head. For example, Give ...