最终实现效果如下
html+css如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="css/font-awesome.min.css"> 7 </head> 8 <style> 9 *{padding:0;margin: 0;} 10 .flexBox{ 11 display: -webkit-flex; 12 display: -moz-flex; 13 display: -ms-flex; 14 display: -o-flex; 15 display: flex; 16 height: 40px;line-height: 40px; 17 } 18 .classHead p{width: 50%;} 19 .grandpa .grandpa-item>.flexBox{border-top: solid 2px #999;padding-left: 30px;} 20 .grandpa .flexBox label, 21 .grandpa .flexBox p{width: 50%;} 22 .grandpa .father .father-item>.flexBox{padding-left: 60px;background: #f9f9f9;border-top: solid 1px #ccc;} 23 .grandpa .father .children .children-item .flexBox{padding-left: 90px;} 24 .grandpa .father .children .children-item:nth-of-type(even) .flexBox{background: #f9f9f9;} 25 .grandpa li{position: relative;} 26 .grandpa li.grandpa-item .fa{position: absolute;left: 10px;top: 11px;display: block;width: 20px;height: 20px;cursor: pointer;} 27 .grandpa li.father-item .fa{position: absolute;left: 38px;top: 11px;display: block;width: 20px;height: 20px;cursor: pointer;} 28 ul,ul li{list-style: none;padding: 0;margin: 0;} 29 </style> 30 <body> 31 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> 32 33 <div style="width: 600px;margin:50px 100px;"> 34 <div class="classHead flexBox"><p>分类ID</p><p>分类名称</p></div> 35 <ul class="grandpa"> 36 <li class="grandpa-item"> 37 <span class="fa fa-chevron-up"></span> 38 <div class="flexBox"> 39 <label class="grandpa-item-label"> 40 <input type="checkbox">一 41 </label> 42 <p>男装</p> 43 </div> 44 <ul class="father"> 45 <li class="father-item"> 46 <span class="fa fa-chevron-up"></span> 47 <div class="flexBox"> 48 <label class="father-item-label"> 49 <input type="checkbox">1 50 </label> 51 <p>男士衬衫</p> 52 </div> 53 <ul class="children"> 54 <li class="children-item"> 55 <div class="flexBox"> 56 <label class="children-item-label"> 57 <input type="checkbox">a 58 </label> 59 <p>男士衬衫1</p> 60 </div> 61 </li> 62 <li class="children-item"> 63 <div class="flexBox"> 64 <label class="children-item-label"> 65 <input type="checkbox">b 66 </label> 67 <p>男士衬衫2</p> 68 </div> 69 </li> 70 <li class="children-item"> 71 <div class="flexBox"> 72 <label class="children-item-label"> 73 <input type="checkbox">e 74 </label> 75 <p>男士衬衫3</p> 76 </div> 77 </li> 78 <li class="children-item"> 79 <div class="flexBox"> 80 <label class="children-item-label"> 81 <input type="checkbox">f 82 </label> 83 <p>男士衬衫4</p> 84 </div> 85 </li> 86 <li class="children-item"> 87 <div class="flexBox"> 88 <label class="children-item-label"> 89 <input type="checkbox">g 90 </label> 91 <p>男士衬衫5</p> 92 </div> 93 </li> 94 </ul> 95 </li> 96 <li class="father-item"> 97 <span class="fa fa-chevron-up"></span> 98 <div class="flexBox"> 99 <label class="father-item-label"> 100 <input type="checkbox">2 101 </label> 102 <p>男士裤子</p> 103 </div> 104 <ul class="children"> 105 <li class="children-item"> 106 <div class="flexBox"> 107 <label class="children-item-label"> 108 <input type="checkbox">c 109 </label> 110 <p>男士短裤</p> 111 </div> 112 </li> 113 <li class="children-item"> 114 <div class="flexBox"> 115 <label class="children-item-label"> 116 <input type="checkbox">d 117 </label> 118 <p>男士长裤</p> 119 </div> 120 </li> 121 </ul> 122 </li> 123 </ul> 124 </li> 125 <li class="grandpa-item"> 126 <span class="fa fa-chevron-up"></span> 127 <div class="flexBox"> 128 <label class="grandpa-item-label"> 129 <input type="checkbox">二 130 </label> 131 <p>女装</p> 132 </div> 133 <ul class="father"> 134 <li class="father-item"> 135 <span class="fa fa-chevron-up"></span> 136 <div class="flexBox"> 137 <label class="father-item-label"> 138 <input type="checkbox">1 139 </label> 140 <p>女士上衣</p> 141 </div> 142 <ul class="children"> 143 <li class="children-item"> 144 <div class="flexBox"> 145 <label class="children-item-label"> 146 <input type="checkbox">x 147 </label> 148 <p>牛仔外套</p> 149 </div> 150 </li> 151 <li class="children-item"> 152 <div class="flexBox"> 153 <label class="children-item-label"> 154 <input type="checkbox">y 155 </label> 156 <p>风衣</p> 157 </div> 158 </li> 159 </ul> 160 </li> 161 </ul> 162 </li> 163 </ul> 164 </div> 165 </body> 166 </html>