摘要：jquery实现垂直展开二级菜单

最近新开发一个简单项目，用到左侧两级的菜单。找找了手头的文件，竟然没有现成的代码，算了，去网上找找整理下吧。

注：jquery-1.8.3.min.js需要下载文件放到同级名为js的文件夹里。

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

<head>

    <title>jquery垂直展开折叠手风琴效果</title>

    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

    <style type="text/css">

        body {

            margin: 0px;

            padding: 0px;

            font-family: "微软雅黑";

            font-size: 12px;

        }

        div, ul, li, ol, dl, dt, dd, img, p, h1, h2, h3, p, table, td, th {

            margin: 0px;

            padding: 0px;

            list-style-type: none;

            border: 0;

        }

        a {

            text-decoration: none;

        }

     /* 侧导航 */

        .menu {

            width: 195px;

            background-color: #cfe5ec;

        }

         .menu ul {

             width: 195px;

             padding-top: 5px;

         }

      .menu li {

          background: #3E8ED5;

          line-height: 30px;

          color: #4f4f4f;

          display: block;

          text-indent: 3em;

          margin-top: 1px;

      }

        .menu li a {

            height: 30px;

            display: block;

            color: white;

        }

            .menu li a:hover {

                height: 30px;

                display: block;

                color: #4f4f4f;

            }

        .cur {

            background: #2668cb;

            font-weight: bold;

        }

        .submenu {

            font-size: 12px;

        }

            .submenu li {

                height:30px;

                line-height:30px;

                background: #48A1F0;

            }

            .submenu a {

                display: block;

                text-decoration: none;

                color: #d9d9d9;

                -webkit-transition: all 0.25s ease;

                -o-transition: all 0.25s ease;

                transition: all 0.25s ease;

            }

        .submenu a:hover {

            background: #2668cb;

            color: #FFF;

        }

    </style>

</head>

<body>

    <div>

        <ul class="menu" id="ulmenu">

            <li>

                <a>开发语言</a>

                <ul class="submenu">

                  <li><a onclick="changeStyle(1);" sysId="1" href="#" >Java</a></li>

                  <li><a onclick="changeStyle(2);" sysId="2" href="#" >NET</a></li>

                  <li><a onclick="changeStyle(3);" sysId="3" href="#" >VB</a></li>

                  <li><a onclick="changeStyle(4);" sysId="4" href="#" >C++</a></li>

                </ul>

            </li>

            <li>

                <a>集成开发环境</a>

                <ul class="submenu">

                  <li><a onclick="changeStyle(5);" sysId="5" href="#" >WebStrom</a></li>

                  <li><a onclick="changeStyle(6);" sysId="6" href="#" >Visual studio</a></li>

                </ul>

            </li>

            <li>

                <a>脚本语言</a>

                <ul class="submenu">

                    <li><a onclick="changeStyle(7);" sysId="7" href="#">Javascript</a></li>

                    <li><a onclick="changeStyle(8);" sysId="8" href="#">Python</a></li>

                </ul>

            </li>

        </ul>

    </div>

</body>

<script type="text/javascript">

    $(function () {

        $('.menu li > .submenu').slideUp('normal');//通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话

        var accordion_head = $('.menu > li > a'),

            accordion_body = $('.menu li > .submenu');

        //accordion_head.first().addClass('active').next().slideDown('normal');这行代码设置页面打开时展开第一个菜单

        accordion_head.on('click', function (event) {

            event.preventDefault();//preventDefault() 方法阻止元素发生默认的行为

            if ($(this).attr('class') != 'active') {

                accordion_body.slideUp('normal');

                $(this).next().stop(true, true).slideToggle('normal');

                //获取.menu > li > a > 点击元素的同级的下个元素>停止所有在该元素上正在运行的动画>通过使用滑动效果在显示和隐藏状态之间切换元素

                accordion_head.removeClass('active');

                $(this).addClass('active');

            }

            else {

                accordion_body.slideUp('normal');

                $(this).removeClass('active');

            }

        });

    });

    function changeStyle(obj) {

        $(".submenu a").each(function () {

            if (obj == $(this).attr("sysId")) {

                $(this).addClass('cur');

            } else {

                $(this).removeClass('cur');

            }

        });

    }

</script>

</html>

样式active用来标记当前哪个元素是展开状态,主要用到jQuery里的slideUp和 slideToggle方法。

jquery垂直展开折叠手风琴二级菜单的更多相关文章

  1. jQuery - 制作点击显示二级菜单效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. jquery导航栏高亮（二级菜单点击一级保持高亮）

    <script type="text/javascript"> var urlstr = location.href; var urlstatus=false; $(& ...

  3. python 全栈开发，Day109(客户管理之动态"二级"菜单)

    昨日内容回顾 1. 权限有几张表? 2. 简述权限流程? 3. 为什么要把权限放入session? 4. 静态文件和模块文件 5. 相关技术点 - orm查询 - 去空 - 去重 - 中间件 - in ...

  4. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  5. Jquery垂直下拉二级菜单

    自己做了一个基于Jquery 的垂直下拉二级菜单功能,直接看图: Html的代码如下: <!DOCTYPE html> <html> <head> <meta ...

  6. jquery 展开折叠菜单

    jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...

  7. jQuery垂直二级导航菜单代码

    http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航.   HTML <div id="my_menu" class=&qu ...

  8. bootstrap-简单实用的垂直手风琴滑动菜单列表特效

    前端: <html lang="zh"> <head> <meta charset="UTF-8"> <meta ht ...

  9. 基于jQuery垂直多级导航菜单代码

    基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="ce&q ...

随机推荐

  1. 基于LR的HTTP协议接口性能测试脚本实例

    背景介绍 XXX项目性能测试中新增业务场景:XX设备的在线激活,因为存在多用户同时在线激活,故需进行性能测试以确认后台服务器系统在多用并发时功能是否正常,性能指标是否满足规格要求.用户使用场景为用户通 ...

  2. 【转】Unity 解析Json字符串

    http://blog.csdn.net/qq_15267341/article/details/52013190 LitJSON使用很简单,两个步骤: 1 将LitJSON.dll文件拖动到unit ...

  3. 【QQ音乐Api】移花接木 打造自己的音乐电台

    最近突发奇想想做个在线音乐小网页.需求很简单,如下 搜索歌曲 或 歌手 在线播放音乐 借用qq 或者 百度的 音乐接口 需求明确那就直接动手了 我首先尝试的百度音乐,但是不能在线播放(提示forbid ...

  4. [dpdk] 读官方文档(3)

    续前节, 测试小程序 1. 想编译测试程序首先需要设置两个环境变量,为什么呢,因为测试程序的Makefile里用了... rpm装了打包好的devel包,这个rpm也会自带这两个环境变量.就是说写第三 ...

  5. Python之创建tuple和“可变”的tuple

    Python之创建tuple tuple是另一种有序的列表,中文翻译为" 元组 ".tuple 和 list 非常类似,但是,tuple一旦创建完毕,就不能修改了. 同样是表示班里 ...

  6. phpcms 导航栏点击栏目颜色定位方法

    另:一个栏目下面如果没有子栏目,那么它调用的模板就是列表页模板(及list_为前缀的模板):如果一个栏目下面有子栏目,那么它调用的就是栏目首页模板(category_为前缀的模板). 当你这个栏目添加 ...

  7. 使用SecureCRT连接ubuntu

    SecureCRT SSH2连接新装的UBUNTU 14.04 LTS 发现UBUNTU默认没有安装SSH 服务 在UBUNTU上 sudo apt-get install openssh-serve ...

  8. td的cellIndex属性被style.display改变

    IE7下面td的cellIndex属性,居然会随着style.display='none'的设置而改变,真是太恶心了

  9. Qt工具知多少（一目了然）

    一级题目: Qt Designer — 所见即所得的界面设计工具, 可以用拖拽的方式将控件排布在界面上,支持layout, 支持signal/slot编辑. 生成的文件保存为ui格式, ui是xml格 ...

  10. H264关于RTP协议的实现

    完整的C/S架构的基于RTP/RTCP的H．264视频传输方案.此方案中,在服务器端和客户端分别进行了功能模块设计. 服务器端:RTP封装模块主要是对H．264码流进行打包封装:RTCP分析模块负责产 ...