css样式
<style type="text/css"> ul{ list-style-type:none;} .head{ background-color:Blue; cursor:pointer;} .body{ border-color:Blue; border-style:solid; border-width:2px;} </style>
js代码
<script type="text/javascript"> $(function () { $("#qq li:odd").addClass("body"); //奇数行 $("#qq li:even").addClass("head").click(function () {//偶数行 $(this).next("li.body").show(1).siblings("li.body").hide(1); }); $("#qq li:first").click();//模拟点击 }); </script>
HTML代码
<body> <ul style=" width:200px;" id="qq"> <li>我的好友</li> <li>张三<br />李四<br />旺旺<br /></li> <li>我得同学</li> <li>张龙<br />赵虎<br />王朝<br /></li> <li>陌生人</li> <li>马汉<br />王五<br />马六<br /></li> </ul></body>
运行效果
转载于:https://www.cnblogs.com/DillonFly/p/4564253.html
相关资源：JQuery&CSS;&CSS; DIV实例大全.rar