这篇文章介绍了 js 实现收缩菜单效果实例代码,有需要的朋友可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
废话不多说, 直接上代码: 有注释
- <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>
来源: