【position也可以很复杂】当弹出层遇上了鼠标定位（上）
前言
周五时同事有一个关于弹出层的问题没有解决，但是面临下班问题，我有点不舒服，便叫回去周六过来解决，但是上周六病了，所以请了个假，于是故事发生啦。。。。
今天上班时候，组员们卡到了那个地方，然后结果就是前端组拖慢了进度，额。。。。这是事实。
于是早会结束，我便投入处理这个问题，因为这个项目原来是外包出去的，后面点要重构，现在只是优化工作，我便一直不太关注，有两个同事主要负责。
但是今天一看到代码我就哭了。。。那家伙，这个还不单单是弹出层的问题呢，里面很有点东西！好了我们进入正题，来一起看看这个问题吧。
请用现代浏览器测试
引出问题
有图有真相，我们来看一个智联招聘里面经常出现的图层：
他这个是没有什么问题的，我们来简单看看其实现：
<div id="zbwJobSearch"> <div style="width: 710px;" class="sPopupDiv"> <div class="sPopupTitle213 sPopupTitle"> <h1> 选择职位</h1> <div class="sButtonBlock"> <a onclick="return zbw.PopupDiv.allIns['buttonSelJobType'].fnClickAll()" href="#" class="blueButton">不限</a> <a onclick="return zbw.PopupDiv.allIns['buttonSelJobType'].fnClickClose()" href="#" class="blueButton">关闭</a></div> <div class="clear"> </div> </div> <div class="clear"> </div> <div class="sPopupBlock"> </div> </div> <div style="width: 710px;" class="sPopupDiv"> <div class="sPopupTitle213 sPopupTitle"> <h1> 选择行业</h1> <div class="sButtonBlock"> <a onclick="return zbw.PopupDiv.allIns['buttonSelIndustry'].fnClickOk()" href="#" class="orgButton">确认</a> <a onclick="return zbw.PopupDiv.allIns['buttonSelIndustry'].fnClickClose()" href="#" class="blueButton">取消</a></div> <div class="clear"> </div> </div> <div class="clear"> </div> <div class="sPopupBlock"> </div> </div> <div style="width: 480px;" class="sPopupDiv"> <div class="sPopupTitle213 sPopupTitle"> <h1> 选择城市</h1> <div class="sButtonBlock"> <a onclick="return zbw.PopupDiv.allIns['JobLocation'].fnClickClose()" href="#" class="blueButton">关闭</a></div> <div class="clear"> </div> </div> <div class="clear"> </div> <div class="sPopupBlock"> </div> </div> </div>
1 <div id="zbwJobSearch"> 2 <div style="width: 710px;" class="sPopupDiv"> 3 <div class="sPopupTitle213 sPopupTitle"> 4 <h1> 5 选择职位</h1> 6 <div class="sButtonBlock"> 7 <a onclick="return zbw.PopupDiv.allIns['buttonSelJobType'].fnClickAll()" href="#" 8 class="blueButton">不限</a> <a onclick="return zbw.PopupDiv.allIns['buttonSelJobType'].fnClickClose()" 9 href="#" class="blueButton">关闭</a></div> 10 <div class="clear"> 11 </div> 12 </div> 13 <div class="clear"> 14 </div> 15 <div class="sPopupBlock"> 16 </div> 17 </div> 18 </div>
他一开始便有一个容器在页面上，看着我们这个“zbwJobSearch”的容器，他是一个一般流的东西，里面放了3个绝对定位的东西，从这里看出，他这个不只是用于职位选择还有城市选择什么的。。。。
然后我们把多余的东西给去掉，点击了一下我本来以为会发送http请求什么的，重新获取数据，再生成我们看到的那颗树，但是解压js后发现这个东西好像被写到了js中，基本就是生成了这个东西：
1 <table width="100%" cellspacing="0" cellpadding="0" border="0" id="jobTab"> 2 <tbody> 3 <tr class="zebraCol0"> 4 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 5 销售|客服|采购 6 </td> 7 <td class="jobtypeItems"> 8 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 9 <tbody> 10 <tr> 11 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 12 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'817')" 13 class="blurItem"> 14 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['817','销售业务'])" 15 class="availItem">销售业务</span> 16 </td> 17 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 18 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'828')" 19 class="blurItem"> 20 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['828','销售管理'])" 21 class="availItem">销售管理</span> 22 </td> 23 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 24 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'842')" 25 class="blurItem"> 26 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['842','销售支持/商务'])" 27 class="availItem">销售支持/商务</span> 28 </td> 29 </tr> 30 <tr> 31 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 32 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'852')" 33 class="blurItem"> 34 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['852','客户服务/售前/售后/技术支持'])" 35 class="availItem">客户服务/售前/售后/技术支持</span> 36 </td> 37 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 38 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'862')" 39 class="blurItem"> 40 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['862','采购/贸易'])" 41 class="availItem">采购/贸易</span> 42 </td> 43 <td> 44 </td> 45 </tr> 46 </tbody> 47 </table> 48 </td> 49 </tr> 50 <tr class="zebraCol1"> 51 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 52 财会|金融 53 </td> 54 <td class="jobtypeItems"> 55 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 56 <tbody> 57 <tr> 58 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 59 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'738')" 60 class="blurItem"> 61 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['738','财务/审计/税务'])" 62 class="availItem">财务/审计/税务</span> 63 </td> 64 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 65 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'761')" 66 class="blurItem"> 67 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['761','银行'])" 68 class="availItem">银行</span> 69 </td> 70 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 71 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'780')" 72 class="blurItem"> 73 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['780','金融/证券/期货/投资'])" 74 class="availItem">金融/证券/期货/投资</span> 75 </td> 76 </tr> 77 <tr> 78 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 79 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'799')" 80 class="blurItem"> 81 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['799','保险'])" 82 class="availItem">保险</span> 83 </td> 84 <td> 85 </td> 86 <td> 87 </td> 88 </tr> 89 </tbody> 90 </table> 91 </td> 92 </tr> 93 <tr class="zebraCol1"> 94 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 95 汽车|工程机械 96 </td> 97 <td class="jobtypeItems"> 98 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 99 <tbody> 100 <tr> 101 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 102 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'257')" 103 class="blurItem"> 104 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['257','汽车/摩托车制造'])" 105 class="availItem">汽车/摩托车制造</span> 106 </td> 107 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 108 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'268')" 109 class="blurItem"> 110 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['268','汽车销售与服务'])" 111 class="availItem">汽车销售与服务</span> 112 </td> 113 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 114 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'280')" 115 class="blurItem"> 116 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['280','工程机械'])" 117 class="availItem">工程机械</span> 118 </td> 119 </tr> 120 </tbody> 121 </table> 122 </td> 123 </tr> 124 <tr class="zebraCol0"> 125 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 126 消费品|生产|物流 127 </td> 128 <td class="jobtypeItems"> 129 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 130 <tbody> 131 <tr> 132 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 133 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'306')" 134 class="blurItem"> 135 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['306','生产/加工/制造'])" 136 class="availItem">生产/加工/制造</span> 137 </td> 138 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 139 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'324')" 140 class="blurItem"> 141 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['324','交通运输服务'])" 142 class="availItem">交通运输服务</span> 143 </td> 144 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 145 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'333')" 146 class="blurItem"> 147 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['333','服装/纺织/食品饮料/皮革'])" 148 class="availItem">服装/纺织/食品饮料/皮革</span> 149 </td> 150 </tr> 151 <tr> 152 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 153 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'348')" 154 class="blurItem"> 155 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['348','物流/仓储'])" 156 class="availItem">物流/仓储</span> 157 </td> 158 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 159 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'366')" 160 class="blurItem"> 161 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['366','技工'])" 162 class="availItem">技工</span> 163 </td> 164 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 165 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'378')" 166 class="blurItem"> 167 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['378','质量管理/安全防护'])" 168 class="availItem">质量管理/安全防护</span> 169 </td> 170 </tr> 171 </tbody> 172 </table> 173 </td> 174 </tr> 175 <tr class="zebraCol1"> 176 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 177 市场|媒介|设计 178 </td> 179 <td class="jobtypeItems"> 180 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 181 <tbody> 182 <tr> 183 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 184 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'389')" 185 class="blurItem"> 186 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['389','市场/营销'])" 187 class="availItem">市场/营销</span> 188 </td> 189 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 190 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'409')" 191 class="blurItem"> 192 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['409','公关/媒介'])" 193 class="availItem">公关/媒介</span> 194 </td> 195 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 196 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'420')" 197 class="blurItem"> 198 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['420','美术/设计/创意'])" 199 class="availItem">美术/设计/创意</span> 200 </td> 201 </tr> 202 <tr> 203 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 204 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'441')" 205 class="blurItem"> 206 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['441','广告/会展'])" 207 class="availItem">广告/会展</span> 208 </td> 209 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 210 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'463')" 211 class="blurItem"> 212 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['463','传媒/影视/报刊/出版/印刷'])" 213 class="availItem">传媒/影视/报刊/出版/印刷</span> 214 </td> 215 <td> 216 </td> 217 </tr> 218 </tbody> 219 </table> 220 </td> 221 </tr> 222 <tr class="zebraCol0"> 223 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 224 医药|化工|能源|环保 225 </td> 226 <td class="jobtypeItems"> 227 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 228 <tbody> 229 <tr> 230 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 231 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'482')" 232 class="blurItem"> 233 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['482','生物/制药/医疗器械'])" 234 class="availItem">生物/制药/医疗器械</span> 235 </td> 236 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 237 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'506')" 238 class="blurItem"> 239 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['506','化工'])" 240 class="availItem">化工</span> 241 </td> 242 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 243 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'518')" 244 class="blurItem"> 245 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['518','环境科学/环保'])" 246 class="availItem">环境科学/环保</span> 247 </td> 248 </tr> 249 <tr> 250 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 251 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'525')" 252 class="blurItem"> 253 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['525','能源/矿产/地质勘查'])" 254 class="availItem">能源/矿产/地质勘查</span> 255 </td> 256 <td> 257 </td> 258 <td> 259 </td> 260 </tr> 261 </tbody> 262 </table> 263 </td> 264 </tr> 265 <tr class="zebraCol1"> 266 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 267 管理|人力资源|行政 268 </td> 269 <td class="jobtypeItems"> 270 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 271 <tbody> 272 <tr> 273 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 274 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'534')" 275 class="blurItem"> 276 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['534','高级管理'])" 277 class="availItem">高级管理</span> 278 </td> 279 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 280 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'546')" 281 class="blurItem"> 282 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['546','人力资源'])" 283 class="availItem">人力资源</span> 284 </td> 285 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 286 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'563')" 287 class="blurItem"> 288 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['563','行政/后勤/文秘'])" 289 class="availItem">行政/后勤/文秘</span> 290 </td> 291 </tr> 292 </tbody> 293 </table> 294 </td> 295 </tr> 296 <tr class="zebraCol0"> 297 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 298 咨询|法律|教育|翻译 299 </td> 300 <td class="jobtypeItems"> 301 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 302 <tbody> 303 <tr> 304 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 305 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'575')" 306 class="blurItem"> 307 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['575','咨询/顾问'])" 308 class="availItem">咨询/顾问</span> 309 </td> 310 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 311 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'589')" 312 class="blurItem"> 313 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['589','教育/培训'])" 314 class="availItem">教育/培训</span> 315 </td> 316 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 317 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'613')" 318 class="blurItem"> 319 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['613','律师/法务/合规'])" 320 class="availItem">律师/法务/合规</span> 321 </td> 322 </tr> 323 <tr> 324 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 325 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'621')" 326 class="blurItem"> 327 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['621','翻译（口译与笔译）'])" 328 class="availItem">翻译（口译与笔译）</span> 329 </td> 330 <td> 331 </td> 332 <td> 333 </td> 334 </tr> 335 </tbody> 336 </table> 337 </td> 338 </tr> 339 <tr class="zebraCol1"> 340 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 341 服务业 342 </td> 343 <td class="jobtypeItems"> 344 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 345 <tbody> 346 <tr> 347 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 348 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'633')" 349 class="blurItem"> 350 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['633','零售/百货/连锁/超市'])" 351 class="availItem">零售/百货/连锁/超市</span> 352 </td> 353 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 354 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'647')" 355 class="blurItem"> 356 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['647','酒店/餐饮/旅游/娱乐'])" 357 class="availItem">酒店/餐饮/旅游/娱乐</span> 358 </td> 359 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 360 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'671')" 361 class="blurItem"> 362 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['671','保健/美容/美发/健身'])" 363 class="availItem">保健/美容/美发/健身</span> 364 </td> 365 </tr> 366 <tr> 367 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 368 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'680')" 369 class="blurItem"> 370 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['680','医院/医疗/护理'])" 371 class="availItem">医院/医疗/护理</span> 372 </td> 373 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 374 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'700')" 375 class="blurItem"> 376 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['700','保安/家政/普通劳动力'])" 377 class="availItem">保安/家政/普通劳动力</span> 378 </td> 379 <td> 380 </td> 381 </tr> 382 </tbody> 383 </table> 384 </td> 385 </tr> 386 <tr class="zebraCol0"> 387 <td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla"> 388 机关单位|学生|其他 389 </td> 390 <td class="jobtypeItems"> 391 <table width="100%" cellspacing="0" cellpadding="0" border="0"> 392 <tbody> 393 <tr> 394 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 395 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'709')" 396 class="blurItem"> 397 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['709','公务员/事业单位/科研机构'])" 398 class="availItem">公务员/事业单位/科研机构</span> 399 </td> 400 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 401 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'719')" 402 class="blurItem"> 403 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['719','农/林/牧/渔业'])" 404 class="availItem">农/林/牧/渔业</span> 405 </td> 406 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 407 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'725')" 408 class="blurItem"> 409 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['725','毕业生/实习生/培训生'])" 410 class="availItem">毕业生/实习生/培训生</span> 411 </td> 412 </tr> 413 <tr> 414 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 415 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'732')" 416 class="blurItem"> 417 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['732','兼职/临时'])" 418 class="availItem">兼职/临时</span> 419 </td> 420 <td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)" 421 onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'736')" 422 class="blurItem"> 423 <span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['736','其他'])" 424 class="availItem">其他</span> 425 </td> 426 </tr> 427 </tbody> 428 </table> 429 </td> 430 </tr> 431 </tbody> 432 </table>
他是一个表格，里面有很多事件！！！
我们这个td里面有一个span元素，给span了一个click事件，点击后会弹出我们要的结果：
然后进行最后的操作。
分析问题
好了，到了这里我们不知道我把问题解释清楚没有：
1 点击外部按钮
便弹出了我们要的第一个弹出层。
2 点击其中的“加号”或者文字便弹出具有多选框的可选项
3 选择项目点击确定。
以上几个做完，我们的流程便结束了。
优化方案
不知从什么时间开始，我有了一点代码洁癖，看着这个代码我怎么就感觉有点不爽，他这个东西主要有以下问题：
1 table渲染速度慢
2 td/span有太多的事件，过多的事件绑定对我们的性能也有影响。
3 他的click函数全部写到了标签上（仁者见仁，我是非常不喜欢这样做）
其它
我们来看看，他其它地方其实做了一定处理:
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['348','物流/仓储'])" class="availItem">物流/仓储</span>
为了防止命名冲突，我们看看这家伙定义的命名空间可长可长了。长到我都不想看了。。。。
好了暂时其它问题我这里还没发现，只不过我认为其中几个图片按钮相关可以用标签实现啦。。。
既然说都说了这么多，那我们不如先来写一个呗，写了再继续我们的问题吧！
实现职位选择功能
我们现在一起来实现这个职位选择功能，所以我们先分析下我们需要干些什么：
① 点击text在text处出现弹出层
② 弹出层出来后，我们点击其中的“加号”或者文字便弹出第三个弹出层
③ 选择第三个弹出层里面的checkbox项目最后点击确定后便将选择插入text（多项以分号分割）
若是想要优化的话，也许可以尝试点击后再加载数据再生成dom，一旦生成后便将dom缓存起来，我们这里作为demo就不搞那么多事情了。
第一步，准备工作
下拉选择文本
实现功能前，我们先准备一点点小东西，第一个就是长得像下拉菜单的文本框：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <style type="text/css"> 5 .dropText { display: inline-block; border: 1px solid #B6B6B6; border-right: none; border-radius: 5px 0 0 5px;
cursor: pointer; margin-right: 20px; } 6 .dropText input { border: none; border-radius: 5px 0 0 5px; cursor: pointer; padding-left: 5px; } 7 .dropText span { display: inline-block; margin-right: -10px; width: 20px; border: 1px solid #B6B6B6;
border-radius: 0 5px 5px 0; margin: -1px -20px -1px 0; text-align: center; padding: 4px 0 4px 8px; } 8 .dropText i { display: inline-block; border: 6px solid black; border-color: black transparent transparent;
border-bottom: none; vertical-align: 3px; } 9 </style> 10 <script src="../../scripts/jquery-1.7.1.js" type="text/javascript"></script> 11 <script type="text/javascript"> 12 $(document).ready(function () { 13 }); 14 </script> 15 </head> 16 <body> 17 <div style="margin: 100px auto; padding-left: 100px;"> 18 <div class="dropText" id="dropText"> 19 <input type="text" placeholder="请选择职位" /><span><i></i> </span> 20 </div> 21 <span>dddd</span> 22 </div> 23 </body> 24 </html>
我们来看看我们形成的这个框，这个在现代浏览器还能看，而且各位千万不要小看这个东西，这个东西真不像各位想象那么简单，比如我这个代码就有很大的优化空间！
PS：各位看到我的span里面多了一个 我为什么会这么做？不这么做有什么影响？i被设置为inline-block对整体行对齐有什么影响，这块代码还可以如何优化？这个问题暂时留给各位了，我们下来再一起解决，这个对行内元素的理解有莫大的帮助，请各位动手吧。
十字开关
1 <style type="text/css"> 2 /*十字开关*/ 3 .croSwitch { display: inline-block; border: 1px solid #108efe; border-radius: 4px; width: 16px;
height: 16px; text-align: center; position: relative; cursor: pointer; } 4 .croSwitch i { background-color: #108efe; border-radius: 6px; position: absolute; } 5 6 .croSwitch .horizontal { width: 12px; height: 2px; left: 2px; top: 7px; } 7 .croSwitch .vertical { height: 12px; width: 2px; top: 2px; left: 7px; } 8 .cls .vertical { display: none; } 9 </style> 10 11 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 12 <span class="croSwitch cls"><i class="horizontal"></i><i class="vertical"></i></span>
虽然很丑但是很温柔。。。
Ps：请思考若是外层span不设置高度会有什么后果
好啦，小东西大概懂弄好了，我们现在来组织职位的dom结构吧。
职位列表样式
我们首先根据上面的表格，使用jquery操作他生成如下结构：
<div id="jobList"> <div class="item_0 "> <span class="title">销售|客服|采购 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 销售业务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 销售管理</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 销售支持/商务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 客户服务/售前/售后/技术支持</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 采购/贸易</label></div> </div> <div class="item_1 alt "> <span class="title">财会|金融 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 财务/审计/税务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 银行</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 金融/证券/期货/投资</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 保险</label></div> </div> <div class="item_2 "> <span class="title">汽车|工程机械 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 汽车/摩托车制造</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 汽车销售与服务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 工程机械</label></div> </div> <div class="item_3 alt "> <span class="title">消费品|生产|物流 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 生产/加工/制造</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 交通运输服务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 服装/纺织/食品饮料/皮革</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 物流/仓储</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 技工</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 质量管理/安全防护</label></div> </div> <div class="item_4 "> <span class="title">市场|媒介|设计 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 市场/营销</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 公关/媒介</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 美术/设计/创意</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 广告/会展</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 传媒/影视/报刊/出版/印刷</label></div> </div> <div class="item_5 alt "> <span class="title">医药|化工|能源|环保 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 生物/制药/医疗器械</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 化工</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 环境科学/环保</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 能源/矿产/地质勘查</label></div> </div> <div class="item_6 "> <span class="title">管理|人力资源|行政 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 高级管理</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 人力资源</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 行政/后勤/文秘</label></div> </div> <div class="item_7 alt "> <span class="title">咨询|法律|教育|翻译 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 咨询/顾问</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 教育/培训</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 律师/法务/合规</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 翻译（口译与笔译）</label></div> </div> <div class="item_8 "> <span class="title">服务业 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 零售/百货/连锁/超市</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 酒店/餐饮/旅游/娱乐</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 保健/美容/美发/健身</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 医院/医疗/护理</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 保安/家政/普通劳动力</label></div> </div> <div class="item_9 alt "> <span class="title">机关单位|学生|其他 </span> <div class="items"> <label> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 公务员/事业单位/科研机构</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 农/林/牧/渔业</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 毕业生/实习生/培训生</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 兼职/临时</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 其他</label></div> </div> </div>
好了，我们现在来调整一下样式。
由于这个家伙着实太丑了，我放弃了，我这里上传个图片好了。。。。
可运行代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 body, input, textarea, select, small, a { font-family: Arial, "宋体"; font-size: 12px; } 7 /*下拉文本样式*/ 8 .dropText { display: inline-block; border: 1px solid #B6B6B6; border-right: none; border-radius: 5px 0 0 5px; cursor: pointer; margin-right: 20px; } 9 .dropText input { border: none; border-radius: 5px 0 0 5px; cursor: pointer; padding-left: 5px; } 10 .dropText span { display: inline-block; margin-right: -10px; width: 20px; border: 1px solid #B6B6B6; border-radius: 0 5px 5px 0; margin: -1px -20px -1px 0; text-align: center; padding: 4px 0 4px 8px; } 11 .dropText i { display: inline-block; border: 6px solid black; border-color: black transparent transparent; border-bottom: none; vertical-align: 3px; } 12 13 /*职位列表样式*/ 14 .jobList { border: 1px solid #8A9FA4; position: absolute; width: 710px; left: 100px; top: 60px; } 15 .jobList > div { padding: 2px; } 16 17 .jobList .title { display: inline-block; width: 120px; text-align: right; font-weight: bold; margin-right: 20px; } 18 .jobList .items { display: inline-block; padding: 2px; width: 550px; } 19 .jobList .items label { background: url(//images0.cnblogs.com/blog/294743/201306/17235544-3da2f08fa48147c9a8fa4a25e98a4632.gif) no-repeat; width: 165px; display: inline-block; padding-left: 18px; margin: 2px 0; cursor: pointer; } 20 .alt { background-color: #EFF6FF; } 21 22 .jobList .toolBar { display: block; position: absolute; background-color: White; border: 1px solid #8A9FA4; border-bottom: none; height: 25px; top: -30px; left: -1px; padding: 4px 10px 0 4px; } 23 .jobList .toolBar h2 { display: inline-block; font-size: 12px; margin: 0; padding: 2px 50px 2px 10px; } 24 .jobList .toolBar .bts { display: inline-block; } 25 .jobList .toolBar .bts a { display: inline-block; border-radius: 2px; text-decoration: none; color: #1b6f8b; background-color: cfe2f4; border: 1px solid #98bed8; padding: 2px 6px; } 26 27 </style> 28 </head> 29 <body> 30 <div id="jobList" class="jobList"> 31 <div class="toolBar"> 32 <h2>请选择职位</h2> 33 <div class="bts"><a href="#" id="btUnLess">不限</a> <a href="#" id="btCls">关闭</a></div> 34 </div> 35 <div class="item_0 "> 36 <span class="title">销售|客服|采购 </span> 37 <div class="items"> 38 <label> 39 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 40 销售业务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 41 销售管理</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 42 销售支持/商务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 43 客户服务/售前/售后/技术支持</label><label><span class="croSwitch"><i class="horizontal"></i><i 44 class="vertical"></i></span> 采购/贸易</label></div> 45 </div> 46 <div class="item_1 alt "> 47 <span class="title">财会|金融 </span> 48 <div class="items"> 49 <label> 50 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 51 财务/审计/税务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 52 银行</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 53 金融/证券/期货/投资</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 54 保险</label></div> 55 </div> 56 <div class="item_2 "> 57 <span class="title">汽车|工程机械 </span> 58 <div class="items"> 59 <label> 60 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 61 汽车/摩托车制造</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 62 汽车销售与服务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 63 工程机械</label></div> 64 </div> 65 <div class="item_3 alt "> 66 <span class="title">消费品|生产|物流 </span> 67 <div class="items"> 68 <label> 69 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 70 生产/加工/制造</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 71 交通运输服务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 72 服装/纺织/食品饮料/皮革</label><label><span class="croSwitch"><i class="horizontal"></i><i 73 class="vertical"></i></span> 物流/仓储</label><label><span class="croSwitch"><i class="horizontal"></i><i 74 class="vertical"></i></span> 技工</label><label><span class="croSwitch"><i class="horizontal"></i><i 75 class="vertical"></i></span> 质量管理/安全防护</label></div> 76 </div> 77 <div class="item_4 "> 78 <span class="title">市场|媒介|设计 </span> 79 <div class="items"> 80 <label> 81 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 82 市场/营销</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 83 公关/媒介</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 84 美术/设计/创意</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 85 广告/会展</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 86 传媒/影视/报刊/出版/印刷</label></div> 87 </div> 88 <div class="item_5 alt "> 89 <span class="title">医药|化工|能源|环保 </span> 90 <div class="items"> 91 <label> 92 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 93 生物/制药/医疗器械</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 94 化工</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 95 环境科学/环保</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 96 能源/矿产/地质勘查</label></div> 97 </div> 98 <div class="item_6 "> 99 <span class="title">管理|人力资源|行政 </span> 100 <div class="items"> 101 <label> 102 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 103 高级管理</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 104 人力资源</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 105 行政/后勤/文秘</label></div> 106 </div> 107 <div class="item_7 alt "> 108 <span class="title">咨询|法律|教育|翻译 </span> 109 <div class="items"> 110 <label> 111 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 112 咨询/顾问</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 113 教育/培训</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 114 律师/法务/合规</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 115 翻译（口译与笔译）</label></div> 116 </div> 117 <div class="item_8 "> 118 <span class="title">服务业 </span> 119 <div class="items"> 120 <label> 121 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 122 零售/百货/连锁/超市</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 123 酒店/餐饮/旅游/娱乐</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 124 保健/美容/美发/健身</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 125 医院/医疗/护理</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 126 保安/家政/普通劳动力</label></div> 127 </div> 128 <div class="item_9 alt "> 129 <span class="title">机关单位|学生|其他 </span> 130 <div class="items"> 131 <label> 132 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 133 公务员/事业单位/科研机构</label><label><span class="croSwitch"><i class="horizontal"></i><i 134 class="vertical"></i></span> 农/林/牧/渔业</label><label><span class="croSwitch"><i class="horizontal"></i><i 135 class="vertical"></i></span> 毕业生/实习生/培训生</label><label><span class="croSwitch"><i 136 class="horizontal"></i><i class="vertical"></i></span> 兼职/临时</label><label><span 137 class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 其他</label></div> 138 </div> 139 </div> 140 </body> 141 </html>
PS：第三个坑，不知道各位发现没，就算使用背景图片，我们的小图片看上去感觉还是有一些问题呢，我们是不是应该看看呢？
好了，我们将我们第一阶段的代码连起来：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 body, input, textarea, select, small, a { font-family: Arial, "宋体"; font-size: 12px; } 7 /*下拉文本样式*/ 8 .dropText { display: inline-block; border: 1px solid #B6B6B6; border-right: none; border-radius: 5px 0 0 5px; cursor: pointer; margin-right: 20px; } 9 .dropText input { border: none; border-radius: 5px 0 0 5px; cursor: pointer; padding-left: 5px; } 10 .dropText span { display: inline-block; margin-right: -10px; width: 20px; border: 1px solid #B6B6B6; border-radius: 0 5px 5px 0; margin: -1px -20px -1px 0; text-align: center; padding: 4px 0 4px 8px; } 11 .dropText i { display: inline-block; border: 6px solid black; border-color: black transparent transparent; border-bottom: none; vertical-align: 2px; } 12 13 /*职位列表样式*/ 14 .jobList { border: 1px solid #8A9FA4; position: absolute; width: 710px; left: 100px; top: 60px; display: none; z-index: 100; background-color: White; } 15 .jobList > div { padding: 2px; } 16 17 .jobList .title { display: inline-block; width: 120px; text-align: right; font-weight: bold; margin-right: 20px; } 18 .jobList .items { display: inline-block; padding: 2px; width: 550px; } 19 .jobList .items label { background: url(//images0.cnblogs.com/blog/294743/201306/17235544-3da2f08fa48147c9a8fa4a25e98a4632.gif) no-repeat; width: 165px; display: inline-block; padding-left: 18px; margin: 2px 0; cursor: pointer; } 20 .alt { background-color: #EFF6FF; } 21 22 .jobList .toolBar { display: block; position: absolute; background-color: White; border: 1px solid #8A9FA4; border-bottom: none; height: 25px; top: -30px; left: -1px; padding: 4px 10px 0 4px; } 23 .jobList .toolBar h2 { display: inline-block; font-size: 12px; margin: 0; padding: 2px 50px 2px 10px; } 24 .jobList .toolBar .bts { display: inline-block; } 25 .jobList .toolBar .bts a { display: inline-block; border-radius: 2px; text-decoration: none; color: #1b6f8b; background-color: cfe2f4; border: 1px solid #98bed8; padding: 2px 6px; } 26 </style> 27 </head> 28 <body> 29 <div style="margin: 100px auto; padding-left: 100px;"> 30 <div class="dropText" id="dropText"> 31 <input type="text" placeholder="请选择职位" /><span><i></i> </span> 32 </div> 33 <span>dddd</span> 34 </div> 35 <div id="jobList" class="jobList"> 36 <div class="toolBar"> 37 <h2> 38 请选择职位</h2> 39 <div class="bts"> 40 <a href="#" id="btUnLess">不限</a> <a href="#" id="btCls">关闭</a></div> 41 </div> 42 <div class="item_0 "> 43 <span class="title">销售|客服|采购 </span> 44 <div class="items"> 45 <label> 46 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 47 销售业务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 48 销售管理</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 49 销售支持/商务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 50 客户服务/售前/售后/技术支持</label><label><span class="croSwitch"><i class="horizontal"></i><i 51 class="vertical"></i></span> 采购/贸易</label></div> 52 </div> 53 <div class="item_1 alt "> 54 <span class="title">财会|金融 </span> 55 <div class="items"> 56 <label> 57 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 58 财务/审计/税务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 59 银行</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 60 金融/证券/期货/投资</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 61 保险</label></div> 62 </div> 63 <div class="item_2 "> 64 <span class="title">汽车|工程机械 </span> 65 <div class="items"> 66 <label> 67 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 68 汽车/摩托车制造</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 69 汽车销售与服务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 70 工程机械</label></div> 71 </div> 72 <div class="item_3 alt "> 73 <span class="title">消费品|生产|物流 </span> 74 <div class="items"> 75 <label> 76 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 77 生产/加工/制造</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 78 交通运输服务</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 79 服装/纺织/食品饮料/皮革</label><label><span class="croSwitch"><i class="horizontal"></i><i 80 class="vertical"></i></span> 物流/仓储</label><label><span class="croSwitch"><i class="horizontal"></i><i 81 class="vertical"></i></span> 技工</label><label><span class="croSwitch"><i class="horizontal"></i><i 82 class="vertical"></i></span> 质量管理/安全防护</label></div> 83 </div> 84 <div class="item_4 "> 85 <span class="title">市场|媒介|设计 </span> 86 <div class="items"> 87 <label> 88 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 89 市场/营销</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 90 公关/媒介</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 91 美术/设计/创意</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 92 广告/会展</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 93 传媒/影视/报刊/出版/印刷</label></div> 94 </div> 95 <div class="item_5 alt "> 96 <span class="title">医药|化工|能源|环保 </span> 97 <div class="items"> 98 <label> 99 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 100 生物/制药/医疗器械</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 101 化工</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 102 环境科学/环保</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 103 能源/矿产/地质勘查</label></div> 104 </div> 105 <div class="item_6 "> 106 <span class="title">管理|人力资源|行政 </span> 107 <div class="items"> 108 <label> 109 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 110 高级管理</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 111 人力资源</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 112 行政/后勤/文秘</label></div> 113 </div> 114 <div class="item_7 alt "> 115 <span class="title">咨询|法律|教育|翻译 </span> 116 <div class="items"> 117 <label> 118 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 119 咨询/顾问</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 120 教育/培训</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 121 律师/法务/合规</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 122 翻译（口译与笔译）</label></div> 123 </div> 124 <div class="item_8 "> 125 <span class="title">服务业 </span> 126 <div class="items"> 127 <label> 128 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 129 零售/百货/连锁/超市</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 130 酒店/餐饮/旅游/娱乐</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 131 保健/美容/美发/健身</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 132 医院/医疗/护理</label><label><span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 133 保安/家政/普通劳动力</label></div> 134 </div> 135 <div class="item_9 alt "> 136 <span class="title">机关单位|学生|其他 </span> 137 <div class="items"> 138 <label> 139 <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 140 公务员/事业单位/科研机构</label><label><span class="croSwitch"><i class="horizontal"></i><i 141 class="vertical"></i></span> 农/林/牧/渔业</label><label><span class="croSwitch"><i class="horizontal"></i><i 142 class="vertical"></i></span> 毕业生/实习生/培训生</label><label><span class="croSwitch"><i 143 class="horizontal"></i><i class="vertical"></i></span> 兼职/临时</label><label><span 144 class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span> 其他</label></div> 145 </div> 146 </div> 147 148 <script src="../../scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 149 <script type="text/javascript"> 150 $(document).ready(function () { 151 152 var dropText = $('#dropText'); 153 var jobList = $('#jobList'); 154 dropText.click(function () { 155 var el = $(this); 156 var offset = el.offset(); 157 jobList.css({ 'top': (offset.top + 25) + 'px', 'left': (offset.left) + 'px' }); 158 jobList.show(); 159 160 }); 161 162 $('#btCls').click(function () { 163 jobList.hide(); 164 }); 165 166 }); 167 </script> 168 </body> 169 </html>
结语
那撒。。。小叶确实熬不住了，明天再接着写吧，若您觉得这次这个有点意思请持续关注，届时我们在解释其中的问题。
