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

 <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. iOS 支付宝应用（备用参考）

    1:先与支付宝签约,获得商户ID(partner)和账号ID(seller) 2:下载相应的公钥私钥文件(加密签名用) 3:下载支付宝SDK 4:生成订单信息5:调用支付宝客户端,由支付宝客户端跟支付 ...

  2. 跨过slf4j和logback，直接晋级log4j 2

    今年一直关注log4j 2,但至今还没有出正式版.等不及了,今天正式向大家介绍一下log4j的升级框架,log4j 2. log4j,相信大家都熟悉,至今对java影响最大的logging系统,至今仍 ...

  3. this.Invoke和this.BeginInvoke的区别

    private void button1_Click(object sender, EventArgs e) { "; this.Invoke(new EventHandler(delega ...

  4. BeanFactory和FactoryBean

    BeanFactory和FactoryBean 1.BeanFactory BeanFactory定义了 IOC 容器的最基本形式,并提供了 IOC 容器应遵守的的最基本的接口,也就是Spring I ...

  5. BZOJ 3173 [Tjoi2013] 最长上升子序列 解题报告

    这个题感觉比较简单,但却比较容易想残.. 我不会用树状数组求这个原排列,于是我只好用线段树...毕竟 Gromah 果弱马. 我们可以直接依次求出原排列的元素,每次找到最小并且最靠右的那个元素,假设这 ...

  6. Flume学习——BasicChannelSemantics

    public class MemoryChannel extends BasicChannelSemantics public abstract class BasicChannelSemantics ...

  7. httpclient 302 重定向

    主要是由于页面可能不是通过 request.sendRedirect跳转的,可能通过js  location跳转的.所以需要拿跳转后的 地址,重新发送请求...如下所示 if (status == H ...

  8. jquery图片放大器插件

    将鼠标移动到一张图片上来的时候,放大该图片的某些细节. <html> <head> <script src="../js/jquery-1.6.js" ...

  9. 微软的Dll管理方案及其变迁（Side-by-side assembly）

    本文简要介绍Side-by-side assembly技术,探讨在插件技术中使用类似方法的可能. 什么是Side-ty-side Assembly Side-by-side assembly是Wind ...

  10. POJ 1942 Paths on a Grid（组合数）

    http://poj.org/problem?id=1942 题意 :在一个n*m的矩形上有n*m个网格,从左下角的网格划到右上角的网格,沿着边画,只能向上或向右走,问有多少条不重复的路 . 思路 : ...