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 Animation实现CSS3动画示例介绍
Aug 14 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
基于JavaScript实现轮播图效果
Jan 02 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
Cakephp 执行主要流程
2010/03/24 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
Python中的匿名函数使用简介
2015/04/27 Python
python字典的常用操作方法小结
2016/05/16 Python
python机器学习之随机森林(七)
2018/03/26 Python
python如何求解两数的最大公约数
2018/09/27 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
python如何获取apk的packagename和activity
2020/01/10 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
自我评价优秀范文分享
2013/11/30 职场文书
给校长的建议书300字
2014/05/16 职场文书
水利水电专业自荐信
2014/07/08 职场文书
颐和园英文导游词
2015/01/30 职场文书
同学聚会感言一句话
2015/07/30 职场文书
公司员工奖惩制度
2015/08/04 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android
Python之基础函数案例详解
2021/08/30 Python