我是一个从汽车行业转行IT的项目经理，我是Edward，如想了解更多，请关注我的公众号【转行项目经理的逆袭之路】。晚上回顾jquery代码的时候发现之前的一个坑。
好友分组列表的案例应该很多人做过：
原本效果是这样的，因为用的是ul,li左侧对不齐，不理想。
查了不少地方才找到：
/* 去掉ul,li的默认左边距，必须一起去掉或者去掉ul的一样 */
ul,li{
margin: 0;
padding: 0;
}
就OK了。
不好意思，我的女友是有点多。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 去掉ul,li的默认左边距，必须一起去掉或者去掉ul的一样 */
ul,li{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li>亲戚
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</li>
<li>朋友
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</li>
<li>女友
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</li>
</ul>
<script src="../js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//hide，show里面都可以设置动画时间和回调函数
$("ul>li>ul").hide('fast')
$("body>ul>li").click(function(){
$(this).children().toggle();
$(this).siblings().children().hide('normal');
})
</script>
</body>
</html>
原创文章 46
获赞 7
访问量 2057