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 相关文章推荐
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
javascript单例模式的简单实现方法
Jul 25 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
vue中轮训器的使用
Jan 27 Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 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类Class的概念
2012/06/14 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
微信小程序如何自定义table组件
2019/06/29 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
python实现大文本文件分割
2019/07/22 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
党风廉设责任书
2014/04/16 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
python编写五子棋游戏
2021/05/25 Python
python+opencv实现视频抽帧示例代码
2021/06/11 Python
Java异常处理try catch的基本用法
2021/12/06 Java/Android
基于Python编写一个监控CPU的应用系统
2022/06/25 Python