【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 ...
随机推荐
- 30分钟全面解析-图解AJAX原理
先上原理图: 高清无码图在这里:点我查看大图!!! 背景: 1.传统的Web网站,提交表单,需要重新加载整个页面. 2.如果服务器长时间未能返回Response,则客户端将会无响应,用户体验很差. 3 ...
- 轻松自动化---selenium-webdriver(python) (四)
本节要解决的问题: 如何定位一组元素? 场景 从上一节的例子中可以看出,webdriver可以很方便的使用findElement方法来定位某个特定的对象,不过有时候我们却需要定位一组对象, 这时候就需 ...
- web接口开发与测试
最近一直在学习和整理web开发与接口测试的相关资料.接口测试本身毫无任何难度,甚至有很多工具和类库来帮助我们进行接口测试.大多测试人员很难深入了解web接口测试的原因是对web开发不太了解,当你越了解 ...
- Testing - 测试基础 - 分类
对软件内部结构的深入程度 黑盒测试:又叫功能测试.数据驱动测试或基于需求规格说明书的功能测试. 白盒测试:又称结构测试.逻辑驱动测试或基于程序代码内部构成的测试. 灰盒测试:包含性能测试.自动化测试. ...
- SQL Server在执行SQL语句时，表之间驱动顺序对性能的影响
环境:SQL Server2012 SP3 企业版,开发服务器,并没有什么负载,全库索引统一Rebuild过 经反复执行验证过, 不算太复杂的SQL(存储过程中代入参数抠出来的SQL代码) 默认情况下 ...
- Kibana源码剖析 —— savedSearch从读取到跳转
持久化对象 Kibana中可以查询到很多保存的对象,他们都存储在es中一个叫做.kibana的索引中. 搜索 存储在type为search中; 图表 存储在type为visualization中: 仪 ...
- Node魔法堂：NPM入了个门
一.前言 NPM作为Node的模块管理和发布工具,作用与Ruby的gem.Python的pypl或setuptools.PHP的pear和.Net的Nuget一样.在当前前端工程化极速狂奔的年代,即使 ...
- 语义化HTML：ul、ol和dl
一.语义化元素 1. ul标签 W3C草案: The ul element represents an unordered list of items; that is, a list in wh ...
- myslq 基本命令
格式: mysql -h主机地址 -u用户名 -p用户密码1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root -p,回车后提示你输密 ...
- Entity Framework 实体框架的形成之旅--几种数据库操作的代码介绍（9）
本篇主要对常规数据操作的处理和实体框架的处理代码进行对比,以便更容易学习理解实体框架里面,对各种数据库处理技巧,本篇介绍几种数据库操作的代码,包括写入中间表操作.联合中间表获取对象集合.递归操作.设置 ...