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 相关文章推荐
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
js+html获取系统当前时间
Nov 10 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
详解React之key的使用和实践
Sep 29 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
比较新旧两个数组值得增加和删除的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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
关于尾递归的使用详解
2013/05/02 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
Python实现远程调用MetaSploit的方法
2014/08/22 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
python 实现按对象传值
2019/12/26 Python
AUC计算方法与Python实现代码
2020/02/28 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
京剧自荐信
2014/01/26 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
投资合作协议书
2014/04/17 职场文书
英文导游词
2015/02/13 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
销售人员管理制度
2015/08/06 职场文书
Tomcat弱口令复现及利用
2022/05/06 Servers