<!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. ADSL自动更换IP地址源代码

    有些网站限制IP地址,什么一个IP地址只能一次之类的.特别是投票网址,为了防止刷票,限制1个IP只允许投票一次! 此程序采用Vs2010+C#开发,提供全部源代码!方便程序猿朋友二次开发! 可以后台运 ...

  2. ASP.NET MVC EF 中使用异步控制器

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精   为什么使用异步操作/线程池 ASP.NET MVC ...

  3. c 头文件<ctype.h>（一）

    头文件<ctype.h>中声明了一些测试字符的函数. 每个函数的参数均为int类型,参数的值必须是EOF或可用unsigned char类型表示的字符,函数返回值为int类型. 如果参数c ...

  4. OEIS A140358

    以前也许做过? 有点方 最小整数1到k 加减得到 n 1+-2+-3+-...+-k = n 求最小k #include <cstdio> #include <algorithm&g ...

  5. UEFI引导在GPT分区下安装win2008——抓住那只傲娇的win2008

    上周遇到个客户DELL R520的服务器新采购了8块3T硬盘做备份服务器,raid配置5+1,一个磁21.8T.先用普通的装desktop OS的方法发现进去没raid盘,然后就按照官方的文档进入Li ...

  6. LeetCode: Linked List Random Node

    这题参照http://blog.jobbole.com/42550/ 用的蓄水池算法,即更改ans的概率为1/(当前length) /** * Definition for singly-linked ...

  7. MS SQL 两种分页

    ------ row number ---------- ------ row number ---------- declare @pageSize int,@pageIndex int ; sel ...

  8. 据库都有哪些锁 然后 Kill session

    当某个数据库用户在数据库中插入.更新.删除一个表的数据,或者增加一个表的主键时或者表的索引时,常常会出现ora-00054:resource busy and acquire with nowait ...

  9. php 设计模式

    一.工厂模式 1.创建接口类,规范方法,要实现这个接口的类必须实现这个接口的所有方法,接口的方法默认是抽象的,所以不再方法前面加 abstract interface people{ public f ...

  10. 802.1X基础

    这是一个认证规范.使用EAPOL协议在客户端与认证端交互. EAPOL协议:Extensible Authentication Protocol over LAN. 假设三个实体: 客户端:PC 认证 ...