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

 <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. c++ deque 双端队列

    双端队列: 函数 描述 c.assign(beg,end)c.assign(n,elem)  将[beg; end)区间中的数据赋值给c.将n个elem的拷贝赋值给c. c.at(idx)  传回索引 ...

  2. 基于局部敏感哈希的协同过滤算法之simHash算法

    搜集了快一个月的资料,虽然不完全懂,但还是先慢慢写着吧,说不定就有思路了呢. 开源的最大好处是会让作者对脏乱臭的代码有羞耻感. 当一个做推荐系统的部门开始重视[数据清理,数据标柱,效果评测,数据统计, ...

  3. <Learning How to Learn>Week One: Focused versus Diffuse Thinking

    1-1 Introduction to the focused and diffuse modes (4:40) 两种思考的模式:focused mode以及diffuse mode focused ...

  4. CentOS 5: Make Command not Found

    在centos 5下安装软件遇到的问题,google了一圈,是因为系统没有安装编译器,那安装就是了,嘿嘿. 解决办法,在SSH下输入下面的命令 yum -y install gcc automake ...

  5. tomcat 设置默认编码格式

    在tomcat目录下 conf文件夹下的server.xml中: <Connector port="80" protocol="HTTP/1.1"     ...

  6. 李洪强iOS开发之【零基础学习iOS开发】【02-C语言】07-基本数据类型

    C语言有丰富的数据类型,因此它很适合用来编写数据库,如DB2.Oracle等大型数据库都是C语言写的.其中,提供了4种最常用的基本数据类型:char.int.float.double,使用这些数据类型 ...

  7. 函数可重入问题reentrant functions（函数执行过程中可以被中断，允许多个副本）

    最近经常听到这个名词,以前也听到过,不过接触更多的是“线程安全问题”,而且本人也一直理解的是两个名字的含义是一样的.今天仔细总结一下这个名词相关的概念. 引用博文:可重入函数和不可重入函数 (http ...

  8. zookeeper入门必读

    (如果感觉有帮助,请帮忙点推荐,添加关注,谢谢!你的支持是我不断更新文章的动力.本博客会逐步推出一系列的关于大型网站架构.分布式应用.设计模式.架构模式等方面的系列文章) 今天我想谈谈zookeepe ...

  9. strcpy函数的C/C++实现

    2013-07-05 14:07:49 本函数给出了几种strcpy与strncpy的实现,有ugly implementation,也有good implementation.并参考标准库中的imp ...

  10. 【TopCoder】SRM 680 DIV 2

    1. BearPair之bigDistance1.1 题目概述在 <= 50的字符串中找位置i,j 满足(1) s[i] != s[j];(2) abs(i-j)尽可能大.若不存在返回-1, 否 ...