<!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. iOS真机运行 Xcode报错(libpng error: CgBI: unhandled critical chunk)问题已解决；

    Cocos2d-x加载图片资源出现libpng error: CgBI: unhandled critical chunk Xcode7.3 设置Remove Text Metadata From P ...

  2. (转载)solr时区问题解决方案

    solr默认的使用的是utc格林尼治时间,与我们的GMT+8相差8个小时,网上好多解决办法是在自己应用中的时间上加8个小时和减8个小时做变换:或者不用date类型,改为long. 个人感觉这两个办法都 ...

  3. sourceTreee设置忽略的文件

    1.忽略不想要的目录,比如bin.obj目录(每次运行本机程序都会变化) 这个在右上角的Settings的Advanced下面的Repository-specific ignore list,点击Ed ...

  4. List转换成XML

    protected void Button1_Click(object sender, EventArgs e) { var customerlist = CustomerHelper.GetList ...

  5. RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.0 版新增消息管理

    在V3.0版本的Web(Mvc.WebForm)与WinForm中我们新增了“消息管理”模块.“消息管理”模块是对框架的所有消息进行管理.通过左侧的消息分类可以查看所选分类的所有消息列表.在主界面上我 ...

  6. java基础类型、包装器

    char a = 'h';  //类包装器 Character aobj = a ;//自动装箱 byte b = 6; Byte bobj = b; short s = 234; Short sob ...

  7. 《量化投资：以MATLAB为工具》连载(2)基础篇-N分钟学会MATLAB（中）

    http://www.matlabsky.com/thread-43937-1-1.html   <量化投资:以MATLAB为工具>连载(3)基础篇-N分钟学会MATLAB(下)     ...

  8. STL-<queue>-priority queue的使用

    简介: 优先队列是一种容器适配器,优先队列的第一个元素总是最大或最小的(自定义的数据类型需要重载运算符).它是以堆为基础实现的一种数据结构. 成员函数(Member functions) (const ...

  9. 夺命雷公狗----Git---4---多人协作实现

    基本流程: 1..创建一个git裸服务器(git init --bare) 2..从裸服务器将版本库克隆到本地(git clone) 3..本地常规操作(git remote + git push o ...

  10. LDA（ Latent Dirichlet Allocation）主题模型 学习报告

    1     问题描述 LDA由Blei, David M..Ng, Andrew Y..Jordan于2003年提出,是一种主题模型,它可以将文档集中每篇文档的主题以概率分布的形式给出,从而通过分析一 ...