【position也可以很复杂】当弹出层遇上了鼠标定位（上）
来源：互联网 发布：淘宝diy u盘好 编辑：程序博客网 时间：2024/05/01 02:17
前言
周五时同事有一个关于弹出层的问题没有解决，但是面临下班问题，我有点不舒服，便叫回去周六过来解决，但是上周六病了，所以请了个假，于是故事发生啦。。。。
今天上班时候，组员们卡到了那个地方，然后结果就是前端组拖慢了进度，额。。。。这是事实。
于是早会结束，我便投入处理这个问题，因为这个项目原来是外包出去的，后面点要重构，现在只是优化工作，我便一直不太关注，有两个同事主要负责。
但是今天一看到代码我就哭了。。。那家伙，这个还不单单是弹出层的问题呢，里面很有点东西！好了我们进入正题，来一起看看这个问题吧。
请用现代浏览器测试
引出问题
有图有真相，我们来看一个智联招聘里面经常出现的图层：
他这个是没有什么问题的，我们来简单看看其实现：
<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(http://images.cnitblog.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><i134 class="vertical"></i></span> 农/林/牧/渔业</label><label><span class="croSwitch"><i class="horizontal"></i><i135 class="vertical"></i></span> 毕业生/实习生/培训生</label><label><span class="croSwitch"><i136 class="horizontal"></i><i class="vertical"></i></span> 兼职/临时</label><label><span137 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(http://images.cnitblog.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><i141 class="vertical"></i></span> 农/林/牧/渔业</label><label><span class="croSwitch"><i class="horizontal"></i><i142 class="vertical"></i></span> 毕业生/实习生/培训生</label><label><span class="croSwitch"><i143 class="horizontal"></i><i class="vertical"></i></span> 兼职/临时</label><label><span144 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>
结语
那撒。。。小叶确实熬不住了，明天再接着写吧，若您觉得这次这个有点意思请持续关注，届时我们在解释其中的问题。
<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- 【position也可以很复杂】当弹出层遇上了鼠标定位（上）
- 当DiscuzNT遇上了Loadrunner(上)
- 当DiscuzNT遇上了Loadrunner(上)
- 当DiscuzNT遇上了Loadrunner(上)
- 当 position:fixed 遇上 transform
- Bootstrap 模态框(也可以说的弹出层)
- 当@PathVariable遇上了"."
- 当java遇上springboot（上）
- Div弹出层-当鼠标移上去出现一个层，鼠标移开这个层消失的特效,大家可以直接拿去用
- jquery鼠标放上去显示悬浮层（弹出div层）定位
- 当Shell遇上了NodeJS
- 当Shell遇上了NodeJS
- 当fork()遇上了printf()
- 当finally遇上了return
- 当Shell遇上了NodeJs
- 当Shell遇上了NodeJS
- js鼠标滑过弹出层的定位bug解决办法
- 当Python和R遇上北京二手房（上）
- 2043密码
- IT有感
- s2sh + json
- 组合dp hud-4532-湫秋系列故事——安排座位
- Java谜题畅读版之类谜题
- 【position也可以很复杂】当弹出层遇上了鼠标定位（上）
- spket1.6.23自动提示Extjs4.1
- (转)链表反向链表的相关操作
- 归并排序
- 关于appweb配置详解
- java的Calendar时间类
- <Java编程思想> 初始化与清理
- HDU2830-----DP最大子矩阵系列
- void* memchr( void *pv, unsigned char ch, size_t size )
