<!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. UIWebView中加载HTML的Table,td设置百分比宽度并且宽度不被里面的内容撑开

    正常情况下,iOS使用WebView加载HTML的Table时,为了让Table适应屏幕宽度,会使用百分比设置td的宽度,但是由于td中的内容过多,td会被撑开,导致整个Table的宽度会变宽,超出屏 ...

  2. 调试一个socket通信bug的心理过程和反思

    背景交代.最近在玩lua的服务端编码, 有项目A,B,AB都是同一个模子的.我手上有A的winsocket客户端和服务端的代码,B项目早期的一份linux下的lua client.服务端.客户端都是L ...

  3. Extjs 3.4 同值合并

    摘自:http://www.cnblogs.com/kunpengit/archive/2012/11/13/2768239.html/** * grid gridPanel 需要合并的表格 * ro ...

  4. 夺命雷公狗-----React---20--实现验证码大写

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  5. （五）SQL入门 数据库查询

    什么是查询?查询就是Select语句对数据库的探究. 查询是一种目的,一种需求,一种期望.是Select语句去实现的.Select语句不是只是指select语句,而是多个子句一起使用得组合. sele ...

  6. word record about IR target detecting and tracking

    1 is submerged in background clutter 淹没在背景杂波中 2 performe poorly for the dim small targets in sever c ...

  7. 数据库助手类 DBHelper

    using System; using System.Collections.Generic; using System.Text; using System.Configuration; using ...

  8. rc.local 增加自启动

    编辑 /etc/rc.d/rc.local,将要执行的命令放里面. 然后给 rc.local 增加执行权限  chmod +x rc.local . 不过该方法正在被逐步淘汰,提示建议采用自定义服务的 ...

  9. httpd 安装

    官网地址:http://httpd.apache.org/docs/2.4/ Download Download the latest release from http://httpd.apache ...

  10. No module named caffe

    1.直接打开终端,输入python,enter,输入import caffe,enter,不出错 2.直接打开终端,输入sudo su切换到root下,或者是直接 sudo python,enter, ...