<!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. kali安装谷歌浏览器的方法及启动问题的解决

    在kali上安装谷歌浏览器的时候,遇到了很多问题,经过不懈努力,终于解决,现在把方法总结一下,希望对遇到同样问题的人能有一定帮助.这是给最白的小白参考的,大牛勿喷哈. 说明:我是在kali rolli ...

  2. paper122：多尺度与多分辨率的关系

    本文转自:http://blog.csdn.net/chgm_456d/article/details/8100513 我一直对于 多尺度与多分辨率没有一个准确的概念.后来看了一些文章,其中xiaow ...

  3. 家长-Parents表增加字段Token，Gender，Email，Portrait

    家长-Parents表增加字段Token,Gender,Email,Portrait ) ) ) )

  4. .net动态类型在处理json数据方面的应用

    我们在.net中处理json数据时,经常需要定义相应的类.比如json数据:{ "name" : "hello", "age" : 18 } ...

  5. 常用的yum命令

    linux各发行版有多种包管理机制,下面介绍基于RedHat系的yum包管理命令:   yum -y install xxx         无需询问,安装xxx包   yum list        ...

  6. 基数排序 java 实现

    基数排序 java 实现 Wikipedia: Radix sort geeksforgeeks: Radix sort 数学之美番外篇:快排为什么那样快 Java排序算法总结(八):基数排序 排序八 ...

  7. >Python下使用subprocess中文乱码的解决方案

    # -*- coding: CP936 -*- import subprocess cmd="cmd.exe" begin=101 end=110 while begin<e ...

  8. 安卓手机APP压力monkey测试

    一.Monkey概述 Monkey是Android中的一个命令行工具,可以运行在模拟器里或实际设备中.它向系统发送伪随机的用户事件流(如按键输入.触摸屏输入.手势输入等),实现对正在开发的应用程序进行 ...

  9. 关于iBatis.NET连接各数据库时提示没找到数据库驱动的依赖文件

    iBatis.net在连接oracle数据库时使用的是:oracleClient1.0 这个是系统自带的驱动,配置上即可,使用的连接配置为: <database> <provider ...

  10. 提供在线制作icon的网站

    http://www.ico.la/ http://www.makeico.com/ http://free.logomaker.cn/tools/icoMaker.aspx http://ico.5 ...