项目需求
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>
原文：https://www.cnblogs.com/shangrao/p/12569130.html