废话不多说,直接上代码: 有注释

 <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>

js实现收缩菜单代码

js实现收缩菜单效果的更多相关文章

  1. JS实战 ·  收缩菜单表单布局

     获取节点的两种方式:     1.通过event对象的srcElement属性:     2.通过事件源对象用this传入.     代码如下: <html> <head> ...

  2. js实现环形菜单效果

    点击中间的圆点,会弹出环形菜单,效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  3. js之展开收缩菜单，用到window.onload ,onclick,

    目标效果:点击标签1,如果列表标签的style的display是block,改成none,否则改成block,来达到展开收缩菜单效果 一.准备阶段 html文件 <!DOCTYPE html&g ...

  4. 原生JS通过勾股定理计算苹果菜单效果

    JS原生苹果菜单效果 知识点: 勾股定理 a²+b²=c² Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需 ...

  5. 原生JS实现苹果菜单

    今天分享下用原生JS实现苹果菜单效果,这个效果的重点有以下几点 图标中心点到鼠标的距离的算法 利用比例计算图标的宽度 代码地址:https://github.com/peng666/blogs/blo ...

  6. 用js枚举实现简易菜单效果

    用js枚举实现简易菜单效果,左侧显示菜单,右侧显示用户选择的菜单,一图胜千言,还是直接来张效果图吧: 以下是代码: <DOCTYPE html> <html> <head ...

  7. Js实现京东无延迟菜单效果(demo)

    一个端午节,外面人山人海,又那么热,我认为宅在家里看看慕课网,充实自己来的实际... 这是一个js实现京东无延迟菜单效果,感觉很好,分享给大家... 1.开发基本的菜单结构 2.开发普通的二级菜单效果 ...

  8. jQuery弹性展开收缩菜单插件gooey.js

    分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <hea ...

  9. js下拉框二级关联菜单效果代码具体实现

    这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

随机推荐

  1. Linux Mint SmoothTask2的安装方法

    首先,先下载smooth task:点击这里下载 下载之后解压缩,里面有个install文件,点击打开: To install plasmoid unpack archive, go to the d ...

  2. 第二天就跳票 将wikipedia上的英文词条翻译为中文 手动

    忙着改简历一整天,刚说完一天一博,就要跳票了. 还是写点东西吧. 今天又翻译了一个维基百科上的条目,刚过一天就忘了怎么弄,还得回头翻帖子.在这先记一下,省的以后找不到. 1.注册个wiki账号,轻松过 ...

  3. sql之left join、right join、inner join的区别（转）

    感谢:http://www.cnblogs.com/pcjim/articles/799302.html ----------------------------------------------- ...

  4. BZOJ 4123 [Baltic2015] Hacker 解题报告

    首先,Alice 会选择一个长度为 $\lfloor\frac{n+1}{2}\rfloor$ 的区间,我们把这个长度记为 $len$. 有这么一个结论:令 $F_i$ 为覆盖 $i$ 点的所有长度为 ...

  5. Windows2003/2008/2008 R2下易语言点支持库配置就退出的问题

    问题: 请问一个问题,我的电脑上win2003系统的,安装了易语言后,一点支持库配置就会自动退出.这是为什么啊? 解决方法如下: 删除 lib下的wmp.npk,重新打开易语言就可以了.

  6. [转载]VS2012程序打包部署详解

    上篇博客把收费系统的总体设计进行了一遍讲解,讲解的同时掺杂了些有关.NET编译机制的总结.程序编写测试完成后接下来我们要做的是打包部署程序,但VS2012让人心痛的是没有了打包工具.不知道出于什么原因 ...

  7. [转载]在網頁上加入HTML5 的Video Tag，直接播放MP4、OGG…等

    在之前有一篇文章提到HTML5(為何iPhone,iPod,iPad不支援Flash,HTML5將更普及於網路世界!!)的重要性,而Html 5的主要革新是在他的語意標籤,像是<video> ...

  8. Linux bash shell脚本语法入门

    1.基础 #!/bin/bash   //bash脚本第一句都是这个,他会让系统指定以bash来解释这个脚本 #                 //shell脚本注释符号 2.变量和使用 HOME= ...

  9. uEditor独立图片上传

    项目中.上传图片,非常希望有一款比较兼容的查件. 网上找了一些,图片上传立刻显示的js代码,还有uploadify.都会碰到这样那样的不兼容和其它头疼的问题. 后来想,干脆就用php的上传类最干脆.但 ...

  10. 影响pogo pin连接器使用寿命的因素

    精细化.安装简易化及使用寿命长是现在数码电子产品的趋势发展,pogo pin连接器体积小而且弹簧伸缩式设计,可以更好的缩小数码电子产品的尺寸并且连接安装更加的简单方便,因此pogo pin连接器得到了 ...