<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单折叠效果</title>
</head>
<script type="text/javascript" src="../../media/js/jquery-min.js"></script>
<style>
    #listShow>li ul{
        display: none;
    }
    #listShow>li>a{
        background:#ccc;
    }
    li{
        list-style: none;
    }
</style>
<script>
    $(function () {
        $('#listShow>li a').click(function () {
            $(this).siblings('ul').toggle().parent('li').siblings('li').children('ul').hide();//方法一
            //$(this).siblings('ul').show().parent('li').siblings('li').children('ul').hide();//方法二
            //$(this).parent('li').children('ul').show().parent('li').siblings('li').children('ul').hide();//方法三
            //$(this).parent('li').children('ul').show(1000).parent('li').siblings('li').children('ul').hide(1000);//方法三拓展（设定显示与隐藏的时间）
        })
    })
</script>
<body>
<div>
    <ul id="listShow">
        <li><a href="#">菜单一</a>
            <ul>
                <li><a href="#">菜单一1</a></li>
                <li><a href="#">菜单一2</a></li>
                <li><a href="#">菜单一3</a></li>
                <li><a href="#">菜单一4</a></li>
                <li><a href="#">菜单一5</a></li>
            </ul>
        </li>
        <li><a href="#">菜单二</a>
            <ul>
                <li><a href="#">菜单二1</a></li>
                <li><a href="#">菜单二2</a></li>
                <li><a href="#">菜单二3</a></li>
                <li><a href="#">菜单二4</a></li>
                <li><a href="#">菜单二5</a></li>
            </ul>
        </li>
        <li><a href="#">菜单三</a>
            <ul>
                <li><a href="#">菜单三1</a></li>
                <li><a href="#">菜单三2</a></li>
                <li><a href="#">菜单三3</a></li>
                <li><a href="#">菜单三4</a></li>
                <li><a href="#">菜单三5</a></li>
            </ul>
        </li>
        <li><a href="#">菜单四</a>
            <ul>
                <li><a href="#">菜单四1</a></li>
                <li><a href="#">菜单四2</a></li>
                <li><a href="#">菜单四3</a></li>
                <li><a href="#">菜单四4</a></li>
                <li><a href="#">菜单四5</a></li>
            </ul>
        </li>
        <li><a href="#">菜单五</a>
            <ul>
                <li><a href="#">菜单五1</a></li>
                <li><a href="#">菜单五2</a></li>
                <li><a href="#">菜单五3</a></li>
                <li><a href="#">菜单五4</a></li>
                <li><a href="#">菜单五5</a></li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>

jq菜单折叠效果的更多相关文章

  1. JQ菜单滑块

    网站导航滑块效果: 复制以下代码保存到html文件中即可查看效果... <html> <head> <title>JQ菜单滑块</title> < ...

  2. 淡入淡出(折叠效果)and点击切换背景图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. css3折叠效果

    在开发过程中,经常会遇到一些交互效果,今天所联系的便是一个类似折纸的折叠效果,查看效果. 说到折纸,我们先看下图 这是我第一时间想到的大体思路,如果能让这6个面连续的变化角度到0不就可以了吗,运用cs ...

  4. jQuery文本段落展开和折叠效果

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  5. 创意设计展示：折叠效果在移动 App 中的应用

    在今天在移动 App 界面设计中,你可以看到不同创意类型的视觉效果.特别是在 Dribbble 上面,有有很多应用程序的 UI 概念设计,让你惊叹.当然,他们大多只是作为一个概念设计,可能永远也不会成 ...

  6. BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  7. 实现类似QQ的折叠效果

    //  主要核心是点击自定义header来展开和收起每一组里面的cell,模型里面应该有isShow此属性来记录开展还是收起. //  ViewController.m//  实现类似QQ的折叠效果/ ...

  8. Swift 2.0 封装图片折叠效果

    文/猫爪(简书作者)原文链接:http://www.jianshu.com/p/688c491580e3著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 用Swift封装图片折叠效果 b ...

  9. jquery-练习-折叠效果

    <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...

随机推荐

  1. [CC]平面拟合

    常见的平面拟合方法一般是最小二乘法.当误差服从正态分布时,最小二乘方法的拟合效果还是很好的,可以转化成PCA问题. 当观测值的误差大于2倍中误差时,认为误差较大.采用最小二乘拟合时精度降低,不够稳健. ...

  2. [原创]java WEB学习笔记103：Spring学习---Spring Bean配置：基于注解的方式(基于注解配置bean，基于注解来装配bean的属性)

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  3. 笔记——shell脚本学习指南

    <shell脚本学习指南>机械工业出版 ISBN 987-7-111-25504-8 第2章 2.4 初级陷阱 1.当今的系统,对#!这一行的长度限制从63到1024个字符都有,尽量不要超 ...

  4. Centos下安装nginx rpm包

    1 在nginx官方网站下载一个rpm包,下载地址是:http://nginx.org/en/download.html wget http://nginx.org/packages/centos/6 ...

  5. Java程序猿学习的建议（转）

    第一部分:对于尚未做过Java工作的同学,包括一些在校生以及刚准备转行Java的同学. 一.Java基础 首先去找一个Java的基础教程学一下,这里可以推荐一个地址,或者你也可以参照这个地址上去找相应 ...

  6. Flex 布局2

    Flex 布局2     你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Sch ...

  7. C# BackgroundWorker组件学习入门介绍

    C# BackgroundWorker组件学习入门介绍 一个程序中需要进行大量的运算,并且需要在运算过程中支持用户一定的交互,为了获得更好的用户体验,使用BackgroundWorker来完成这一功能 ...

  8. sqlserver数据库 Schema

    //读取数据库中所有的数据库 USE MASTER DECLARE @is_policy_automation_enabled bit SET @is_policy_automation_enable ...

  9. Andrion错误解决:cannot be resolved or is not a field

    cannot be resolved or is not a field   解决这个问题:   选择project菜单中的clean,选择你的项目,先clean一下, 再去看看Activity中有没 ...

  10. 使用IO流实现一个简单的小Dome

    (一) 在电脑D盘下创建一个文件为HelloWorld.txt文件,判断他是文件还是目录,在创建一个目录IOTest,之后将HelloWorld.txt移动到IOTest目录下去:之后遍历IOTest ...