【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>
<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>
他一开始便有一个容器在页面上，看着我们这个“zbwJobSearch”的容器，他是一个一般流的东西，里面放了3个绝对定位的东西，从这里看出，他这个不只是用于职位选择还有城市选择什么的。。。。
然后我们把多余的东西给去掉，点击了一下我本来以为会发送http请求什么的，重新获取数据，再生成我们看到的那颗树，但是解压js后发现这个东西好像被写到了js中，基本就是生成了这个东西：
<table width="100%" cellspacing="0" cellpadding="0" border="0" id="jobTab">
<tbody>
<tr class="zebraCol0">
<td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla">
销售|客服|采购
</td>
<td class="jobtypeItems">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'817')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['817','销售业务'])"
class="availItem">销售业务</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'828')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['828','销售管理'])"
class="availItem">销售管理</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'842')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['842','销售支持/商务'])"
class="availItem">销售支持/商务</span>
</td>
</tr>
<tr>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'852')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['852','客户服务/售前/售后/技术支持'])"
class="availItem">客户服务/售前/售后/技术支持</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'862')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['862','采购/贸易'])"
class="availItem">采购/贸易</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="zebraCol1">
<td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla">
财会|金融
</td>
<td class="jobtypeItems">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'738')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['738','财务/审计/税务'])"
class="availItem">财务/审计/税务</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'761')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['761','银行'])"
class="availItem">银行</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'780')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['780','金融/证券/期货/投资'])"
class="availItem">金融/证券/期货/投资</span>
</td>
</tr>
<tr>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'799')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['799','保险'])"
class="availItem">保险</span>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="zebraCol1">
<td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla">
汽车|工程机械
</td>
<td class="jobtypeItems">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'257')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['257','汽车/摩托车制造'])"
class="availItem">汽车/摩托车制造</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'268')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['268','汽车销售与服务'])"
class="availItem">汽车销售与服务</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'280')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['280','工程机械'])"
class="availItem">工程机械</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="zebraCol0">
<td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla">
消费品|生产|物流
</td>
<td class="jobtypeItems">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'306')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['306','生产/加工/制造'])"
class="availItem">生产/加工/制造</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'324')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['324','交通运输服务'])"
class="availItem">交通运输服务</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'333')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['333','服装/纺织/食品饮料/皮革'])"
class="availItem">服装/纺织/食品饮料/皮革</span>
</td>
</tr>
<tr>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'348')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['348','物流/仓储'])"
class="availItem">物流/仓储</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'366')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['366','技工'])"
class="availItem">技工</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'378')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['378','质量管理/安全防护'])"
class="availItem">质量管理/安全防护</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="zebraCol1">
<td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla">
市场|媒介|设计
</td>
<td class="jobtypeItems">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'389')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['389','市场/营销'])"
class="availItem">市场/营销</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'409')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['409','公关/媒介'])"
class="availItem">公关/媒介</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'420')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['420','美术/设计/创意'])"
class="availItem">美术/设计/创意</span>
</td>
</tr>
<tr>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'441')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['441','广告/会展'])"
class="availItem">广告/会展</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'463')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['463','传媒/影视/报刊/出版/印刷'])"
class="availItem">传媒/影视/报刊/出版/印刷</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="zebraCol0">
<td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla">
医药|化工|能源|环保
</td>
<td class="jobtypeItems">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'482')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['482','生物/制药/医疗器械'])"
class="availItem">生物/制药/医疗器械</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'506')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['506','化工'])"
class="availItem">化工</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'518')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['518','环境科学/环保'])"
class="availItem">环境科学/环保</span>
</td>
</tr>
<tr>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'525')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['525','能源/矿产/地质勘查'])"
class="availItem">能源/矿产/地质勘查</span>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="zebraCol1">
<td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla">
管理|人力资源|行政
</td>
<td class="jobtypeItems">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'534')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['534','高级管理'])"
class="availItem">高级管理</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'546')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['546','人力资源'])"
class="availItem">人力资源</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'563')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['563','行政/后勤/文秘'])"
class="availItem">行政/后勤/文秘</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="zebraCol0">
<td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla">
咨询|法律|教育|翻译
</td>
<td class="jobtypeItems">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'575')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['575','咨询/顾问'])"
class="availItem">咨询/顾问</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'589')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['589','教育/培训'])"
class="availItem">教育/培训</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'613')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['613','律师/法务/合规'])"
class="availItem">律师/法务/合规</span>
</td>
</tr>
<tr>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'621')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['621','翻译（口译与笔译）'])"
class="availItem">翻译（口译与笔译）</span>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="zebraCol1">
<td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla">
服务业
</td>
<td class="jobtypeItems">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'633')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['633','零售/百货/连锁/超市'])"
class="availItem">零售/百货/连锁/超市</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'647')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['647','酒店/餐饮/旅游/娱乐'])"
class="availItem">酒店/餐饮/旅游/娱乐</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'671')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['671','保健/美容/美发/健身'])"
class="availItem">保健/美容/美发/健身</span>
</td>
</tr>
<tr>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'680')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['680','医院/医疗/护理'])"
class="availItem">医院/医疗/护理</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'700')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['700','保安/家政/普通劳动力'])"
class="availItem">保安/家政/普通劳动力</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="zebraCol0">
<td valign="middle" nowrap="nowrap" class="leftClass jobtypeLCla">
机关单位|学生|其他
</td>
<td class="jobtypeItems">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'709')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['709','公务员/事业单位/科研机构'])"
class="availItem">公务员/事业单位/科研机构</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'719')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['719','农/林/牧/渔业'])"
class="availItem">农/林/牧/渔业</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'725')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['725','毕业生/实习生/培训生'])"
class="availItem">毕业生/实习生/培训生</span>
</td>
</tr>
<tr>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'732')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['732','兼职/临时'])"
class="availItem">兼职/临时</span>
</td>
<td width="33%" onmouseout="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOutJobtype(this)"
onmouseover="zbw.PopupDiv.allIns['buttonSelJobType'].fnMOverJobtype(this,'736')"
class="blurItem">
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['736','其他'])"
class="availItem">其他</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</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就不搞那么多事情了。
第一步，准备工作
下拉选择文本
实现功能前，我们先准备一点点小东西，第一个就是长得像下拉菜单的文本框：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.dropText { display: inline-block; border: 1px solid #B6B6B6; border-right: none; border-radius: 5px 0 0 5px;
cursor: pointer; margin-right: 20px; }
.dropText input { border: none; border-radius: 5px 0 0 5px; cursor: pointer; padding-left: 5px; }
.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; }
.dropText i { display: inline-block; border: 6px solid black; border-color: black transparent transparent;
border-bottom: none; vertical-align: 3px; }
</style>
<script src="../../scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
});
</script>
</head>
<body>
<div style="margin: 100px auto; padding-left: 100px;">
<div class="dropText" id="dropText">
<input type="text" placeholder="请选择职位" /><span><i></i> </span>
</div>
<span>dddd</span>
</div>
</body>
</html>
我们来看看我们形成的这个框，这个在现代浏览器还能看，而且各位千万不要小看这个东西，这个东西真不像各位想象那么简单，比如我这个代码就有很大的优化空间！
PS：各位看到我的span里面多了一个 我为什么会这么做？不这么做有什么影响？i被设置为inline-block对整体行对齐有什么影响，这块代码还可以如何优化？这个问题暂时留给各位了，我们下来再一起解决，这个对行内元素的理解有莫大的帮助，请各位动手吧。
十字开关
<style type="text/css">
/*十字开关*/
.croSwitch { display: inline-block; border: 1px solid #108efe; border-radius: 4px; width: 16px;
height: 16px; text-align: center; position: relative; cursor: pointer; }
.croSwitch i { background-color: #108efe; border-radius: 6px; position: absolute; } .croSwitch .horizontal { width: 12px; height: 2px; left: 2px; top: 7px; }
.croSwitch .vertical { height: 12px; width: 2px; top: 2px; left: 7px; }
.cls .vertical { display: none; }
</style> <span class="croSwitch"><i class="horizontal"></i><i class="vertical"></i></span>
<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>
最新的结构
好了，我们现在来调整一下样式。
由于这个家伙着实太丑了，我放弃了，我这里上传个图片好了。。。。
可运行代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body, input, textarea, select, small, a { font-family: Arial, "宋体"; font-size: 12px; }
/*下拉文本样式*/
.dropText { display: inline-block; border: 1px solid #B6B6B6; border-right: none; border-radius: 5px 0 0 5px; cursor: pointer; margin-right: 20px; }
.dropText input { border: none; border-radius: 5px 0 0 5px; cursor: pointer; padding-left: 5px; }
.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; }
.dropText i { display: inline-block; border: 6px solid black; border-color: black transparent transparent; border-bottom: none; vertical-align: 3px; } /*职位列表样式*/
.jobList { border: 1px solid #8A9FA4; position: absolute; width: 710px; left: 100px; top: 60px; }
.jobList > div { padding: 2px; } .jobList .title { display: inline-block; width: 120px; text-align: right; font-weight: bold; margin-right: 20px; }
.jobList .items { display: inline-block; padding: 2px; width: 550px; }
.jobList .items label { background: url(https://images0.cnblogs.com/blog/294743/201306/17235544-3da2f08fa48147c9a8fa4a25e98a4632.gif) no-repeat; width: 165px; display: inline-block; padding-left: 18px; margin: 2px 0; cursor: pointer; }
.alt { background-color: #EFF6FF; } .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; }
.jobList .toolBar h2 { display: inline-block; font-size: 12px; margin: 0; padding: 2px 50px 2px 10px; }
.jobList .toolBar .bts { display: inline-block; }
.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; } </style>
</head>
<body>
<div id="jobList" class="jobList">
<div class="toolBar">
<h2>请选择职位</h2>
<div class="bts"><a href="#" id="btUnLess">不限</a> <a href="#" id="btCls">关闭</a></div>
</div>
<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>
</body>
</html>
基本列表样式
PS：第三个坑，不知道各位发现没，就算使用背景图片，我们的小图片看上去感觉还是有一些问题呢，我们是不是应该看看呢？
好了，我们将我们第一阶段的代码连起来：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body, input, textarea, select, small, a { font-family: Arial, "宋体"; font-size: 12px; }
/*下拉文本样式*/
.dropText { display: inline-block; border: 1px solid #B6B6B6; border-right: none; border-radius: 5px 0 0 5px; cursor: pointer; margin-right: 20px; }
.dropText input { border: none; border-radius: 5px 0 0 5px; cursor: pointer; padding-left: 5px; }
.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; }
.dropText i { display: inline-block; border: 6px solid black; border-color: black transparent transparent; border-bottom: none; vertical-align: 2px; } /*职位列表样式*/
.jobList { border: 1px solid #8A9FA4; position: absolute; width: 710px; left: 100px; top: 60px; display: none; z-index: 100; background-color: White; }
.jobList > div { padding: 2px; } .jobList .title { display: inline-block; width: 120px; text-align: right; font-weight: bold; margin-right: 20px; }
.jobList .items { display: inline-block; padding: 2px; width: 550px; }
.jobList .items label { background: url(https://images0.cnblogs.com/blog/294743/201306/17235544-3da2f08fa48147c9a8fa4a25e98a4632.gif) no-repeat; width: 165px; display: inline-block; padding-left: 18px; margin: 2px 0; cursor: pointer; }
.alt { background-color: #EFF6FF; } .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; }
.jobList .toolBar h2 { display: inline-block; font-size: 12px; margin: 0; padding: 2px 50px 2px 10px; }
.jobList .toolBar .bts { display: inline-block; }
.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; }
</style>
</head>
<body>
<div style="margin: 100px auto; padding-left: 100px;">
<div class="dropText" id="dropText">
<input type="text" placeholder="请选择职位" /><span><i></i> </span>
</div>
<span>dddd</span>
</div>
<div id="jobList" class="jobList">
<div class="toolBar">
<h2>
请选择职位</h2>
<div class="bts">
<a href="#" id="btUnLess">不限</a> <a href="#" id="btCls">关闭</a></div>
</div>
<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> <script src="../../scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () { var dropText = $('#dropText');
var jobList = $('#jobList');
dropText.click(function () {
var el = $(this);
var offset = el.offset();
jobList.css({ 'top': (offset.top + 25) + 'px', 'left': (offset.left) + 'px' });
jobList.show(); }); $('#btCls').click(function () {
jobList.hide();
}); });
</script>
</body>
</html>
带交互代码
结语
那撒。。。小叶确实熬不住了，明天再接着写吧，若您觉得这次这个有点意思请持续关注，届时我们在解释其中的问题。
【position也可以很复杂】当弹出层遇上了鼠标定位（上）的更多相关文章
- 【position也可以很复杂】当弹出层遇上了鼠标定位（下）
前言 接着昨天的内容写,为了保证内容连续性,这里还是把昨天的内容拷了过来. 请用现代浏览器测试 引出问题 有图有真相,我们来看一个智联招聘里面经常出现的图层: 他这个是没有什么问题的,我们来简单看看其 ...
- Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)
一.实际项目中有很多如下界面效果. 二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码: <!DOCTYPE html> <html> & ...
- 微信小程序弹出层点击穿透问题
问题描述:使用小程序的modal组件实现遮罩层效果时,会出现滚动穿透的问题,即遮罩层后面的页面依旧可以滚动. 解决方案: 给底层页面动态添加 position:fixed; 代码: wxml: < ...
- chrome浏览器上传图片反应很慢，延迟很久才弹出窗口
chrome浏览器上传图片反应很慢,延迟很久才弹出窗口 一个上传图片的控件,点击按钮上传图片,用chrome(谷歌浏览器)时,点击按钮后,要等好几秒才弹出文件选择窗口 可以试一下,把网络断开,这个问题 ...
- div样式position：fixed,不随屏幕滚动而滚动，导致屏幕太小时弹出层被遮挡，无法滚动查看的解决办法
window.onscroll = function () { var sl = -Math.max(document.body.scrollTop, document.documentElement ...
- jquery制作弹出层带遮罩效果，点击阴影部分层消失
jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...
- 一步步编写avalon组件01：弹出层组件
avalon2已经稳定下来,是时候教大家如何使用组件这个高级功能了. 组件是我们实现叠积木开发的关键. avalon2实现一个组件非常轻松,并且如何操作这个组件也比以前的avalon2,还是react ...
- js制作带有遮罩弹出层实现登录小窗口
要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...
- ASP.NET—013：实现带控件的弹出层（弹出框）
http://blog.csdn.net/yysyangyangyangshan/article/details/38458169 在页面中用到弹出新页面的情况比较多的,一般来说都是使用JS方法sho ...
随机推荐
- 机器学习&数据挖掘笔记_14（GMM-HMM语音识别简单理解）
为了对GMM-HMM在语音识别上的应用有个宏观认识,花了些时间读了下HTK(用htk完成简单的孤立词识别)的部分源码,对该算法总算有了点大概认识,达到了预期我想要的.不得不说,网络上关于语音识别的通俗 ...
- Oracle存储过程获取YYYY-MM-DD的时间格式
环境:Oracle 10g,11g 问题重现:PL/SQL中命令窗口下,发现存储过程得到的时间格式不符合预期要求. SQL> select sysdate from dual; SYSDATE ...
- Intention.js – 动态重构 HTML 为响应式模式
Intention.js 提供一个轻量级的和明确的方式,帮助你动态重组 HTML,成为响应式的方式.操作方法都放在了元素自己里面,所以灵活的布局看起来就似乎不会那么的抽象和凌乱. 您可以轻松地增加布局 ...
- S Gallery – 很有特色的响应式 jQuery 相册插件
S Gallery 是一款响应式的 jQuery 相册插件.使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换,所以只能在支持这些功能的浏览器中使用. 这款插件它有一个特色功能 ...
- Halcon与MFC交互编程
Halcon是商业化的机器视觉软件.网上下了halcon10的破解版,安装后编写了个图像显示的MFC小程序. 编译器用的是VS2008. 1 配置halcon环境 新建为MFC后,在VC++目录中配置 ...
- js简单实现div宽度匀速增加/减小
效果类似百度首页音乐盒. 点击音乐右边的div可以变长或者变短. 代码: <!DOCTYPE html> <html lang="en"> <head ...
- 非常完善的Log4net详细说明
4.1.6 <filter> 过滤器,只能作为<appender>的子元素. 支持的属性: type 必须的,Filter的类型 支持的子元素: param 0个或多个, ...
- html5和css3的常用参考网
当我们使用HTML5, CSS3,甚至Bootstrap设计网站的时候,有些方面是必须考虑的,比如字体大小,标题大小,行间距,每行字数,字体,颜色,背景图片和文字的搭 配,图标,留白和布局...... ...
- ASP.NET MVC部分视图PartialView的使用
在ASP.NET MVC项目中,部分视图PartialVieww使用很广.它实际就是在ASP.NET环境的用户自定义控件UserControl. 在控制器中,创建一个视图操作Action和一个部分视图 ...
- HoverTree开源项目已经实现管理员登录
ASP.NET开源项目HoverTree已经实现了管理员登录功能,最新代码请到以下网址查看.http://hovertree.com/down/ 点击Clone右边的Download就可以下载最新开发 ...