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正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 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
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
jQuery列表拖动排列具体实现
2013/11/04 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Python中的延迟绑定原理详解
2019/10/11 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
艺术用品:Arteza
2018/11/25 全球购物
工作自我评价分享
2013/12/01 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
节约用水倡议书
2014/04/16 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
2014年共青团工作总结
2014/12/10 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
社会实践单位意见
2015/06/05 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
Python学习开发之图形用户界面详解
2021/08/23 Python
Python 图片添加美颜效果
2022/04/28 Python