jQuery简单竖排手风琴折叠菜单代码
项目需求
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简单竖排手风琴折叠菜单代码的更多相关文章
- 基于jQuery制作的手风琴折叠菜单
初始化为全部隐藏 点第一个,显示第一个所隐藏的内容 当点第二个的时候,第一个的内容隐藏,第二个栏目的内容显示,以此类推 下面是代码部分 <!DOCTYPE html><html la ...
- jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解
在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...
- jQuery简单的手风琴菜单
查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...
- [转] CSS3垂直手风琴折叠菜单
[From] http://www.html5tricks.com/css3-ver-accordion-menu.html 之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的.今天 ...
- javascript实现的手风琴折叠菜单效果
演示地址:http://codepen.io/anon/pen/pJERMq 实现效果: HTML代码: <!DOCTYPE html> <html lang="en&qu ...
- 基于jquery的简洁树形折叠菜单
先上效果图: 最小的ul就是一个最小的树枝,空间允许时可无限扩展.html如下: <div class="panel panel-default"> <div c ...
- jquery 只有二级下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery垂直展开折叠手风琴二级菜单
摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...
- jquery实现简单的Tab切换菜单
实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...
随机推荐
- tf.nn.conv2d 卷积
tf.nn.conv2d(input, filter, strides, padding, use_cudnn_on_gpu=None, name=None) 第一个参数input:指需要做卷积的输入 ...
- AJ学IOS（35）UI之Quartz2D仿真支付宝手势解锁_代理获得密码。
AJ分享,必须精品 效果: 实现步骤 其实这个实现起来不难 第一步先放好主要的UI,一张背景图和一个View 第二部就是把9个button放到view中,设置好按钮的默认和选中图片. 注意:创建时候的 ...
- 解决click与hover(mouseover)的冲突问题
主要应用到一个知识点:$(selector).data('name','value'); <!DOCTYPE HTML> <html> <head> <met ...
- get 获取方式练习题及dom基础
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- python3 xlwt,csv学习
前言 对于抓取一些站点分析然后指纹识别的时候可能用到到它.所以学习下.这里就记录一些最基本的感觉有用的. xlwt 基本创建 demo: #coding=utf- import xlwt yunyin ...
- Java环境下 selenium webDriver + chrome浏览器搭建与调试
一.首先下载selenium webDriver jar包,下载地址如下: http://selenium-release.storage.googleapis.com/index.html 二.下载 ...
- Stream—一个早产的婴儿
当你会关注这篇文章时,那么意味着你对Stream或多或少有些了解,甚至你在许多业务中有所应用.正如你所知,业界对Stream.lambda褒贬不一,有人认为它是银弹,也有人认为其降低了代码的可读性.事 ...
- shiro：集成Spring（四）
基于[加密及密码比对器(三)]项目改造 引入相关依赖环境 shiro-spring已经包含 shiro-core和shiro-web 所以这两个依赖可以删掉 <!--shiro继承spring依 ...
- 图解Python的垃圾回收机制
Python的GC模块主要运用了“引用计数”(reference counting)来跟踪和回收垃圾.在引用计数的基础上,还可以通过“标记-清除”(mark and sweep)解决容器对象可能产生的 ...
- 大部分人都不知道的8个python神操作
01 print 打印带有颜色的信息 大家知道 Python 中的信息打印函数 Print,一般我们会使用它打印一些东西,作为一个简单调试. 但是你知道么,这个 Print 打印出来的字体颜色是可以设 ...