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


Posted in Javascript onOctober 30, 2013

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

<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>
Javascript 相关文章推荐
js去除重复字符串两种实现方法
Jan 09 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
js解决movebox移动问题
Mar 29 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 #Javascript
利用javascript实现web页面中指定区域打印
Oct 30 #Javascript
javascript ajax 仿百度分页函数
Oct 29 #Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 #Javascript
javaScript实现浮点数转十六进制字符
Oct 29 #Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 #Javascript
js动态设置div的值下例子
Oct 29 #Javascript
You might like
杏林同学录(六)
2006/10/09 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现的简单发送邮件脚本分享
2014/11/07 Python
Python的re模块正则表达式操作
2016/05/25 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
Python自带的IDE在哪里
2020/07/01 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
操行评语大全
2014/04/30 职场文书
村党支部换届选举方案
2014/05/02 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
食品药品安全责任书
2015/05/11 职场文书
报案材料怎么写
2015/05/25 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技
关于Redis的主从复制及哨兵问题
2022/06/16 Redis