js实现收缩菜单效果实例代码

 更新时间:2013年10月30日 15:23:08   作者:   我要评论

这篇文章介绍了js实现收缩菜单效果实例代码,有需要的朋友可以参考一下

废话不多说,直接上代码: 有注释

复制代码 代码如下:

<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-1.9.0.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 onkeypress兼容性写法详解

    JS onkeypress兼容性写法详解

    这篇文章主要为大家详细介绍了JS onkeypress兼容性的写法,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • JS打开图片另存为对话框实现代码

    JS打开图片另存为对话框实现代码

    使用JS打开图片另存为对话框一直都是网页应用中不可缺少的一部分,本人有些好奇,于是搜集整理了一些实现代码,不知道符不符合大众的口味,在此班门弄斧了,需要的朋友可以了解下
    2012-12-12
  • JS生成某个范围的随机数【四种情况详解】

    JS生成某个范围的随机数【四种情况详解】

    下面小编就为大家带来一篇JS生成某个范围的随机数【四种情况详解】。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
    2016-04-04
  • Javascript非构造函数的继承

    Javascript非构造函数的继承

    本文给大家介绍的是不使用构造函数实现"继承",非常的简单,小伙伴们仔细了解下就可以非常熟悉了。
    2015-04-04
  • JS继承之借用构造函数继承和组合继承

    JS继承之借用构造函数继承和组合继承

    这篇文章主要为大家详细介绍了JS继承之借用构造函数继承和组合继承,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • javascript显示动态时间的方法汇总

    javascript显示动态时间的方法汇总

    本文给大家汇总介绍了3种javascript实现动态显示时间的方法及详细示例,有需要的小伙伴可以参考下
    2018-07-07
  • js抽奖实现随机抽奖代码效果

    js抽奖实现随机抽奖代码效果

    这篇文章主要介绍了js随机抽奖代码效果,大家参考使用
    2013-12-12
  • BootStrap 智能表单实战系列(五) 表单依赖插件处理

    BootStrap 智能表单实战系列(五) 表单依赖插件处理

    这篇文章主要介绍了BootStrap 智能表单实战系列(五) 表单依赖插件处理 的相关资料,比较简单,主要介绍生产表单元素后的一些后续处理操作,非常不错具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-06-06
  • php对mongodb的扩展(初识如故)

    php对mongodb的扩展(初识如故)

    mongodb的数据存储格式是一种由于MongoDB的文档结构为BJSON格式(BJSON全称:Binary JSON),而BJSON格式本身就支持保存二进制格式的数据,因此可以把文件的二进制格式的数据直接保存到MongoDB的文档结构中
    2012-11-11
  • JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解

    JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解

    这篇文章主要介绍了JavaScript实现的原生态兼容IE6可调可控滚动文字功能,简单说明了文字滚动的实现原理并结合具体实例形式给出了javascript文字滚动功能的具体实现代码,需要的朋友可以参考下
    2017-09-09

最新评论