一个非常经典的Demo，自行开发可以扩展。

<head>
    <title></title>
    <style type="text/css">
        div
        {
            border: 1px solid black;
            width: 100px;
        }
        ul .tit, .content
        {
            list-style-type: none;
        }
        .menu
        {
            padding: 0px;
            margin: 0px;
        }
        .tit
        {
            background-color:#0094ff;
            color:White;
            padding:2px 10px;
            cursor:pointer;
        }
    </style>
    <script src="js/jquery-2.0.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //一开始直接隐藏菜单
            $(".content").hide();
            //给标题添加点击事件
            $(".tit").click(function () {
                //当点击的时候,打开菜单,同时其他的菜单隐藏
                $(this).next().slideDown().parent().siblings().children(".content").slideUp();
            }).first().next().slideDown();//默认之后第一个菜单打开
        });
    </script>
</head>
<body>
    <div>
        <ul class="menu">
            <li class="tit">菜单1</li>
            <li class="content">
                <ul>
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                </ul>
            </li>
        </ul>
        <ul class="menu">
            <li class="tit">菜单2</li>
            <li class="content">
                <ul>
                    <li>22222</li>
                    <li>22222</li>
                    <li>22222</li>
                    <li>22222</li>
                </ul>
            </li>
        </ul>
        <ul class="menu">
            <li class="tit">菜单3</li>
            <li class="content">
                <ul>
                    <li>22222</li>
                    <li>22222</li>
                    <li>22222</li>
                    <li>22222</li>
                </ul>
            </li>
        </ul>
    </div>
</body>

注：Js版本可以自行替换

Js-Html 前端系列--可伸缩菜单的更多相关文章

  1. [后端人员耍前端系列]AngularJs篇：30分钟快速掌握AngularJs

    一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...

  2. JS列表的下拉菜单组件(仿美化控件select)

    JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...

  3. arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  4. Vue.js到前端工程化

    b站视频地址:黑马程序员Vue.js到前端工程化(webpack打包,以及Vue-cli3和Element-UI的使用) vue学习系列 1.vue概述 2.vue基本使用 3.vue模板语法 4.指 ...

  5. js实现前端分页页码管理

    用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...

  6. JS高级前端开发群加群说明及如何晋级

    JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明:   一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...

  7. 前端进阶试题css（来自js高级前端开发---豪情）既然被发现了HOHO，那我就置顶了嘿嘿！觉得自己技术OK的可以把这套题目做完哦，然后加入高级前端的社区咯

    http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...

  8. HTML、CSS、JS在前端开发中都扮演怎样的角色

    前端开发,需要经常接触 HTML.DOM.CSS.JS等,那么HTML.CSS.JS在前端开发中究竟扮演怎样的角色呢?以下是个人的一些观点... HTML:超文本标记语言 (Hyper Text Ma ...

  9. [后端人员耍前端系列]AngularJs篇：使用AngularJs打造一个简易权限系统

    一.引言 上一篇博文已经向大家介绍了AngularJS核心的一些知识点,在这篇博文将介绍如何把AngularJs应用到实际项目中.本篇博文将使用AngularJS来打造一个简易的权限管理系统.下面不多 ...

随机推荐

  1. ASP.NET 5应用是如何运行的（3）

    ASP.NET 5应用是如何运行的(3) 设置自定义的入口程序体现应用本身与应用托管之间的分离,它使我们可以创建独立于托管环境的应用,并根据需要寄宿于任何一个我们希望的宿主程序下,对于Web应用来说这 ...

  2. Java 之关键字 null 使用总结

    1.null的使用 Java中,null是一个关键字,用来标识一个不确定的对象.因此可以将null赋给引用类型变量,但不可以将null赋给基本类型变量.比如我们在定义一个变量的时候我们通过会这样做:X ...

  3. Spring Resource之ResourceLoaderAware接口

    ResourceLoaderAware接口是一个特殊的标记接口,它表示对象需要提供给一个ResourceLoader引用: public interface ResourceLoaderAware { ...

  4. js 模拟QQ聊天窗口图片播放效果（带滚轮缩放）

    页面效果如下: 完整代码如下: <!DOCTYPE html> <html> <head> <title>Test</title> < ...

  5. 基于MEF的插件框架之总体设计

    基于MEF的插件框架之总体设计 1.MEF框架简介 MEF的全称是Managed Extensibility Framework(MEF),其是.net4.0的组成部分,在3.5上也可以使用.熟悉ja ...

  6. 微信SDK使用总结

    最近做一个分享功能,需要使用微信SDK分享内容给朋友或朋友圈.期间遇到些奇怪的问题,花了点时间去折腾了一番. 首先需要到微信开放平台http://open.weixin.qq.com/?lang=zh ...

  7. WCF、Web API、WCF REST、Web Service

    WCF.Web API.WCF REST.Web Service 区别 Web Service It is based on SOAP and return data in XML form. It ...

  8. Yeoman入门之安装及环境配置

    Yeoman入门之安装及环境配置 http://blog.csdn.net/panlingfan/article/details/27345037 http://www.nodejs.orgYEOMA ...

  9. quartz_spring 定时器配置

    quartz:石英,表达精确准时的意思. quartz-all-1.6.1.jar 主要用于定时任务管理. <?xml version="1.0" encoding=&quo ...

  10. HBase MVCC 代码阅读（一）

    MultiVersionConcurrencyControl.java,版本 0.94.1 MultiVersionConsistencyControl 管理 memstore 中的读写一致性.该类实 ...