Js-Html 前端系列--可伸缩菜单
2015-12-27 13:54
344 查看
一个非常经典的Demo,自行开发可以扩展。
<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-2.0.3.min.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>
注:Js版本可以自行替换
相关文章推荐
- 前端资源优化方案理解
- 【实践】nodeJS写个简单的爬虫程序
- css去掉swf图片的白边
- AngularJS 包含
- HTML中的颜色及名称
- 原生js表单验证代码
- HTML中的特殊符号
- js整理4
- Leetcode: Game of Life
- JS_数据类型之null,undefined,date(),typeConvert..
- leetcode - Populating Next Right Pointers in Each Node II
- AngularJS使用angular-formly进行表单验证
- hiho 23 最短路径 一(Dijstra)
- 输入框 js正则推断输入
- 延时加载JavaScript代码提高速度
- iOS开发,入门级ReactiveCocoa教程(二)
- nodejs+chromium 创建桌面应用程序
- js作用域、异步——学习笔记
- AngularJS使用ngMessages进行表单验证
- AngularJS使用angular-formly进行表单验证