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 相关文章推荐
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
Sort()函数的多种用法
Mar 20 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
JS中数据结构之栈
Jan 01 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
Vue实现简单的留言板
Oct 23 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 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
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
禁止F5等快捷键的JS代码
2007/03/06 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
Python 自动补全(vim)
2014/11/30 Python
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
python多线程下信号处理程序示例
2019/05/31 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
pytorch进行上采样的种类实例
2020/02/18 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
企业治理工作自我评价
2013/09/26 职场文书
总裁办公室主任职责
2014/01/02 职场文书
怎么写自荐书范文
2014/02/12 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
会计求职自荐信
2015/03/26 职场文书
房租涨价通知
2015/04/23 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript