项目需求
1.刚开始只显示，每个标题，

2.让每个 li列表隔行换色

3.当我点击某个标题时，下面的列表会缓慢的展开，其他列表展开的内容会收起

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="js/jQuery1.8.js" type="text/javascript" charset="utf-8"></script>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            div{

                border: 2px red #7FFFD4;

                width: 200px;

            }

            h3{

                background-color: #7FFFD4;

                font-size: 16px;

                line-height: 30px;

                border-bottom: 1px gray solid;

            }

            li{

                list-style: none;

                background-color: #CCCCCC;

                font-size: 12px;

                line-height: 23px;

                border-bottom: 1px gray #069DD5;

            }

            .aa{

                height: 100px;

            }

            ul{

                display: none;

            }

        </style>

    </head>

    <body>

        <script type="text/javascript">

            $(document).ready(function(){

              // 使用循环让 每个ul 下的li偶数隔行变色

              for (var i=0;i<$("ul").length;i++) {

                  $("ul:eq("+i+") li:even").css("background-color","red")

              }

              // 当我们点击h3时，让当前的h3下一个标签（next()）,添加上滑下滑事件，并让同辈的ul元素隐藏起来

              $("h3").click(function(){

                 $(this).next().slideToggle("slow").siblings("ul").slideUp();

              })

            });

        </script>

        <div id="a">

            <h3>标题1</h3>

            <ul>

                <li>111111</li>

                <li>111111</li>

                <li>111111</li>

                <li>111111</li>

                <li>111111</li>

            </ul>

            <h3>标题2</h3>

            <ul>

                <li>2222222</li>

                <li>22222222</li>

                <li>2222222</li>

                <li>22222222</li>

            </ul>

            <h3>标题3</h3>

            <ul>

                <li>333333333</li>

                <li>3333333333</li>

                <li>3333333</li>

                <li>33333333</li>

            </ul>

            <h3>标题4</h3>

            <ul>

                <li>4444444</li>

                <li>444</li>

                <li>44444</li>

                <li>44444</li>

                <li>44444</li>

                <li>444444</li>

                <li>44444444</li>

            </ul>

        </div>

        <!---->

    </body>

</html>

jQuery简单竖排手风琴折叠菜单代码的更多相关文章

  1. 基于jQuery制作的手风琴折叠菜单

    初始化为全部隐藏 点第一个,显示第一个所隐藏的内容 当点第二个的时候,第一个的内容隐藏,第二个栏目的内容显示,以此类推 下面是代码部分 <!DOCTYPE html><html la ...

  2. jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解

    在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...

  3. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

  4. [转] CSS3垂直手风琴折叠菜单

    [From] http://www.html5tricks.com/css3-ver-accordion-menu.html 之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的.今天 ...

  5. javascript实现的手风琴折叠菜单效果

    演示地址:http://codepen.io/anon/pen/pJERMq 实现效果: HTML代码: <!DOCTYPE html> <html lang="en&qu ...

  6. 基于jquery的简洁树形折叠菜单

    先上效果图: 最小的ul就是一个最小的树枝,空间允许时可无限扩展.html如下: <div class="panel panel-default"> <div c ...

  7. jquery 只有二级下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery垂直展开折叠手风琴二级菜单

    摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...

  9. jquery实现简单的Tab切换菜单

    实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...

随机推荐

  1. Powershell追踪路由

    一般情况下,我们可以通过Cmdlet命令来实现路由追踪 我们是否能尝试通过Powershell完成此功能呢? 脚本具体如下,可以直接粘贴 function GetTraceRoute($hostnam ...

  2. Git应用详解第七讲：Git refspec与远程分支的重要操作

    前言 前情提要:Git应用详解第六讲:Git协作与Git pull常见问题 这一节来介绍本地仓库与远程仓库的分支映射关系:git refspec.彻底弄清楚本地仓库到底是如何与远程仓库进行联系的. 一 ...

  3. 使用docker-compose编写常规的lnmp容器，pdo连接mysql失败。

    问题的核心是yii2 是通过pdo的方式去连接数据的.但是我们通过容器去搭建lnmp环境时,nginx , php , mysql 这三个服务是独立的三个容器,彼此隔离.所以在yii2中连接mysql ...

  4. Java接口和抽象类有什么区别，哪些时候用接口，哪些时候用抽象类?

    Java接口和抽象类有什么区别,哪些时候用接口,哪些时候用抽象类? 2013-01-05 17:16:09|  分类: JAVA |  标签:java  |举报|字号 订阅     下面比较一下两者的 ...

  5. ftl中几个特殊的用法

    @ 注意${}为变量的渲染显示,即先计算后打印出来,而<>里面为定义等操作符的定义 ,而首尾2个<>中间部分一般为计算打印部分 @数据模型中如果不是以map数据来封装的,而是直 ...

  6. 如何配置多个Spring的xml配置文件(多模块配置)

    如何使用多个Spring的xml配置文件(多模块配置) (2009-08-22 13:42:43)   如何使用多个Spring的xml配置文件(多模块配置) 在用Struts Spring Hibe ...

  7. 曹工说Redis源码（6）-- redis server 主循环大体流程解析

    文章导航 Redis源码系列的初衷,是帮助我们更好地理解Redis,更懂Redis,而怎么才能懂,光看是不够的,建议跟着下面的这一篇,把环境搭建起来,后续可以自己阅读源码,或者跟着我这边一起阅读.由于 ...

  8. Jbox弹窗控件无法获取子页面元素值得问题

    top.$.jBox.open("iframe:${ctx}/report/reportSubjectDatabase/toChildWindow", "请选择重构快照表 ...

  9. 机器学习新手项目之N-gram分词

    概述 对机器学习感兴趣的小伙伴,可以借助python,实现一个N-gram分词中的Unigram和Bigram分词器,来进行入门, github地址 此项目并将前向最大切词FMM和后向最大切词的结果作 ...

  10. 【题解】P3959 宝藏 - 状压dp / dfs剪枝

    P3959 宝藏 题目描述 参与考古挖掘的小明得到了一份藏宝图,藏宝图上标出了 n 个深埋在地下的宝藏屋, 也给出了这 n 个宝藏屋之间可供开发的m  条道路和它们的长度. 小明决心亲自前往挖掘所有宝 ...