jQuery简单竖排手风琴折叠菜单代码
2024-08-30 07:46:06
项目需求
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>
最新文章
- 酷欧天气(CoolWeather)应用源码
- css 命名规范
- bzoj1977 [BeiJing2010组队]次小生成树 Tree
- 图算法（一）——基本图算法（BFS，DFS及其应用）（2）
- 微信JSSDK示例代码 笔记
- ByteBuffer的allocate和allocateDirect区别
- 深入理解计算机各种类型大小（sizeof）
- kettle Java Filter(表达式过滤)
- fckeditor的用法
- flash builder4.7安装git插件
- js、java传值编码
- c++ 深浅拷贝
- OpenCV2.x自学笔记——自适应阈值
- 以写作为例说下IT人如何培养挣钱DNA
- 西安活动 | 4月20日「拥抱开源，又见.NET ：云时代 • 新契机」
- webdriver API
- wget 下载命令
- mongodb备份与还原
- PHP 编程小点
- TCP socket和web socket的区别