【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>
带交互代码
三层弹出：
我们在样式上做一点优化，加上鼠标hover效果，其它暂时不管。于是我们来看看他点击时候再弹出功能如何实现呢？我们这里看看原来的代码：
<span onclick="zbw.PopupDiv.allIns['buttonSelJobType'].fnPopupChildren(this,['306','生产/加工/制造'])" class="availItem">生产/加工/制造</span>
我们看着，他这里有一个id，所以我这里有这样一个实现思路：
① 这个id必定对应着自己的id，我们根据此id可以选出其子项（根据省id可以得出市id）
② 由于他这个数据是一次性读出的，所以父级id对应子项应该已经缓存起来了，可以是字符串，也可以是dom结构
③ 然后我们这里先预先定义一个这样的结构：
var jobListObj = {
'1': 'dom',
'2': 'dom',
'3': 'dom',
'4': 'dom'
}
现在的逻辑便是，我们点击“加号”或者文字，从而获取我们的id（1-4），我们根据id获取dom，我们再定位我们的dom在应该出现的位置，整个逻辑结束。
于是我们来测试下我们的思路是否正确，因为原来就没有绑定id上，我们现在为四个角搞一个id即可，四个方向上能正常显示，我们这里就不管了。
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: 555px; }
.jobList .items label { background: url(https://images0.cnblogs.com/blog/294743/201306/17235544-3da2f08fa48147c9a8fa4a25e98a4632.gif) no-repeat 5px 5px; width: 155px; display: inline-block; padding: 4px 1px 4px 22px; margin: 2px; cursor: pointer; }
.jobList .items label.cls { background: #ffffff url(https://images0.cnblogs.com/blog/294743/201306/18090058-4de319626b6f46adbb3871292dca97b6.gif) no-repeat 4px 4px; border: 1px solid #C7C7C7; padding: 3px 0 3px 21px; } .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; } .jobItem { background-color: White; width: 360px; border: 1px solid #C7C7C7; padding: 5px; position: absolute; z-index: 200; display: none; }
.jobItem label { display: inline-block; width: 170px; color: #3059A8; }
.jobItem label input { vertical-align: -2px; }
.btBlock { border-top: 1px solid #C7C7C7; margin-top: 10px; padding: 5px 0; } .jobItem .bgLine { background: #C7C7C7; height: 1px; position: absolute; width: 194px; } .button { display: inline-block; border-radius: 2px; text-decoration: none; color: #1b6f8b; background-color: #cfe2f4; border: 1px solid #98bed8; padding: 2px 10px; }
</style>
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></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>
</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>
销售业务</label><label>
销售管理</label><label>
销售支持/商务</label><label>
客户服务/售前/售后/技术支持</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>
财务/审计/税务</label><label>
银行</label><label>
金融/证券/期货/投资</label><label>
保险</label></div>
</div>
<div class="item_2 ">
<span class="title">汽车|工程机械 </span>
<div class="items">
<label>
汽车/摩托车制造</label><label>
汽车销售与服务</label><label>
工程机械</label></div>
</div>
<div class="item_3 alt ">
<span class="title">消费品|生产|物流 </span>
<div class="items">
<label>
生产/加工/制造</label><label>
交通运输服务</label><label>
服装/纺织/食品饮料/皮革</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>
市场/营销</label><label>
公关/媒介</label><label>
美术/设计/创意</label><label>
广告/会展</label><label>
传媒/影视/报刊/出版/印刷</label></div>
</div>
<div class="item_5 alt ">
<span class="title">医药|化工|能源|环保 </span>
<div class="items">
<label>
生物/制药/医疗器械</label><label>
化工</label><label>
环境科学/环保</label><label>
能源/矿产/地质勘查</label></div>
</div>
<div class="item_6 ">
<span class="title">管理|人力资源|行政 </span>
<div class="items">
<label>
高级管理</label><label>
人力资源</label><label>
行政/后勤/文秘</label></div>
</div>
<div class="item_7 alt ">
<span class="title">咨询|法律|教育|翻译 </span>
<div class="items">
<label>
咨询/顾问</label><label>
教育/培训</label><label>
律师/法务/合规</label><label>
翻译（口译与笔译）</label></div>
</div>
<div class="item_8 ">
<span class="title">服务业 </span>
<div class="items">
<label>
零售/百货/连锁/超市</label><label>
酒店/餐饮/旅游/娱乐</label><label>
保健/美容/美发/健身</label><label>
医院/医疗/护理</label><label>
保安/家政/普通劳动力</label></div>
</div>
<div class="item_9 alt ">
<span class="title">机关单位|学生|其他 </span>
<div class="items">
<label>
公务员/事业单位/科研机构</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>
<div id="jobItem0" class="jobItem">
<div class="bgLine">
</div>
<label>
<input type="checkbox" name="chItem_0"><span>销售代表</span></label><label><input type="checkbox"
name="chItem_0"><span>客户代表</span></label><label><input type="checkbox" name="chItem_0"><span>电话销售</span></label><label><input
type="checkbox" name="chItem_0"><span>销售工程师</span></label><label><input type="checkbox"
name="chItem_0"><span>渠道/分销专员</span></label><label><input type="checkbox" name="chItem_0"><span>医药销售代表</span></label><label><input
type="checkbox" name="chItem_0"><span>经销商</span></label><label><input type="checkbox"
name="chItem_0"><span>网站推广</span></label><label><input type="checkbox" name="chItem_0"><span>团购业务员</span></label><label><input
type="checkbox" name="chItem_0"><span>其他</span></label>
<div class="btBlock">
<label>
<input type="checkbox"><span>全选</span></label>
<a href="#" class="ok button">确认</a> <a href="#" class="cancel button">取消</a>
</div>
</div> <script type="text/javascript">
$(document).ready(function () {
var timer = null;
var dropText = $('#dropText');
var jobList = $('#jobList');
var jobItem0 = $('#jobItem0');
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();
}); jobItem0.mouseenter(function () {
if (timer) clearTimeout(timer); }); //点击展开三级菜单
$('#jobList').delegate(' .items label', 'click', function (e) {
var el = $(this);
if (el.hasClass('cls')) {
el.removeClass('cls');
clsJobList();
} else {
el.addClass('cls');
var bgLine = jobItem0.find('.bgLine'); //获取作为客户端判断点
var x = e.clientX;
var y = e.clientY;
var offset = el.offset();
var height = parseInt(el.outerHeight());
var width = parseInt(el.outerWidth()); jobItem0.css('border', '1px solid #C7C7C7'); jobItem0.show(); //向上
if (y > 300 && false) {
jobItem0.css({
'top': (offset.top - height - 1) + 'px',
'border-bottom': 'none'
});
bgLine.css('bottom', '1px');
} else {
jobItem0.css({
'top': (offset.top + height - 1) + 'px',
'border-top': 'none'
});
bgLine.css('top', '-1px');
} //向左
if (x > 500) {
jobItem0.css({
'left': (offset.left - width - 16) + 'px'
});
bgLine.css('right', '177px');
} else {
jobItem0.css({
'left': offset.left + 'px'
});
bgLine.css('right', '0');
}
var s = ''; el.unbind('mouseout').mouseout(function () {
if (timer) clearTimeout(timer);
timer = setTimeout(clsJobList, 100) });
jobItem0.mouseleave(clsJobList);
} function clsJobList() {
el.removeClass('cls');
jobItem0.hide();
el.unbind('mouseout');
} }); });
</script>
</body>
</html>
演示效果，可运行（友情提示请使用IE9+）
咳咳，离题离的离谱
昨天最初想写的东西和以上的东西没有多大关联，偏题偏得离谱啊！！！
我当时很臭屁的认为自己能1,2个小时完成这个功能来着，最后发现这家伙还真不是那么简单的。。。这不，今天又花了2个小时才搞出这么一个四不像的东西，而且我也不想继续搞这个了，因为这次的主题不是这个，职位选择框我们暂时就这个样式吧，以后有机会再形成插件。
现在我们开始进行下一步探讨，看看问题出现在哪。
正文开始
我们看到，这个职位选择框，其实本身没有什么问题，但是卡了组员1.5天的东西到底是什么呢？
其实是需求，因为需求变更，原来放在页面上，好好的元素，现在被放在了一个弹出层里面，于是各种各样的问题都出来了。。。。
① 弹出层的遮盖层z-index过大，遮盖了我们的职位层
② 弹出层本身的z-index过大，也遮盖了我们的职位层
但是以上两个问题都比较好处理，比较难处理的出来了：
这个项目之前的项目人员并不是像我这样将各个弹出层独立出来，都是以body为包含快（containing block），而是放在了一个div里面
并且将这个div放进了弹出层那个容器里面，于是我们来看看可能出现的问题：
① 由于absolute的包含快有所不同，其依赖最近的布局元素，所以之前js计算位置的方法可能失效
② 不知道原来处于什么考虑，代码中div容器布局为relative。。。。。其定位方法十分诡异
③ 奇怪的现象就是二级弹出层正常显示，三级弹出层你压根找不到！！！
以上便是组员遇到的问题，还有一个客观的因素就是原来的js依次分布到三个不同的地方，然后代码又全部压缩过了，我处理的时候还需要解压什么的，而且原来的代码中有很多地方没有分号，没有报错真是个奇迹（其实经常出现莫名的js错误啦，总之坑很多）。
我看着代码后不一会就发现了问题所在，问题本身并不难，解决也比较轻易，但是知不知道就很重要了。
原来实现思路：
① 由于装第一个弹出层的div是relative定位的，所以他定位到下拉框的实现方法和我们想象的不一样，是相对于div的位置，而不是body
他这个实现方案，我们不予评价，但是就这种方法要伤害多少我多少脑细胞，我就确实不想去想了。。。这里我居然还有点佩服原来开发的思维能力了。。。
② 他第一步，弹出层居然还能精准定位到下拉文本，但是当他再点击弹出层里面的文字准备弹出最终的东西时，终于开始悲剧了。。。
我那两个倒霉的组员要干神马事情呢，他们面临的又是什么呢：
① 在绝对定位弹出层上面（parent）有个正常流文本下拉文本框与div容器（div），并且该容器是relative定位的
② div中有2块弹出层（tan1，tan2），点击parent上面的下拉文本便弹出tan1，并且其定位必须精准，1像素只差都会很难看
③ 在tan1出来后，便点击tan1中的文字，根据该文字元素定位tan2
PS：不知道你们晕没有，反正我是晕了
人家这个插件本来是用于普通流的，其根元素为body，但是现在搞到弹出层里面来了，所以出现了这些问题。
我最后就直接总结了一下他这个最大的问题，就是实现过于复杂，所以昨天才忍不住自己写了一个（虽然效果不好。。。）
当然，最后我的解决方案更加诡异，这里就不说明了，因为没有什么意义，但是根据这个东西，我却提炼了一点点很有意思的东西与大家分享呢。这也是组员找不到问题的原因。
relative与鼠标点的定位
有例子有真相！！！
<!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 { font: 12px 'PTSansRegular',Arial,Helvetica,sans-serif; background: #D1D1D1; }
ul, li { margin: 0; padding: 0}
li { list-style: none; } #tabs_container { width: 400px; height: 200px; background: white;}
#tabs { border-bottom: 1px solid #1C87D5; padding: 5px 5px 0; width: 690px; margin: 0 auto; }
#tabs li { padding: 5px 10px; cursor: pointer; display: inline-block; background: #1C87D5; color: White; }
#tabs li.sec { color: black;} #parent { width: 700px; height: 400px; background: white; margin: 0 auto; position: relative; }
#parent div { filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; font-weight:bold; background: red; position: absolute; }
</style>
</head>
<body>
<ul id="tabs" >
<li type="draw" class="sec">画矩形框</li>
<li type="drag">拖到矩形框</li>
</ul>
<div id="parent">
</div>
<div id="state"></div>
<script type="text/javascript">
var parent = document.getElementById('parent'),
tabs = document.getElementById('tabs'),
state = document.getElementById('state'),
con = document.getElementById('content'),
li = tabs.getElementsByTagName('li'),
type = 'draw'; //drag tabs.addEventListener('click', function (e) {
for (var i = 0; i < li.length; i++) {
var el = li[i];
el.className = '';
var s = '';
}
var cur_el = e.target;
cur_el.className = 'sec';
type = cur_el.type; var s = '';
}, false); parent.addEventListener('mousedown', function (e) {
var scope = this;
if (type == 'draw') {
(function () {
var el = e.target, //当前点击元素，父div或者拖到div
x = e.clientX,
y = e.clientY,
offsetTop = scope.offsetTop,
offsetLeft = scope.offsetLeft;
var div_x = x - offsetLeft,
div_y = y - offsetTop;
var div = document.createElement('div');
var style = 'left: ' + div_x + 'px; top: ' + div_y + 'px;';
div.setAttribute('style', style);
div.innerHTML = scope.getElementsByTagName('div').length;
scope.appendChild(div);
var func_move = function (ee) {
var x1 = ee.clientX,
y1 = ee.clientY;
var w = x1 - x;
var h = y1 - y;
if (w > 5 || h > 5) {
div.setAttribute('style', style + 'width: ' + w + 'px; height: ' + h + 'px;');
}
};
var func_up = function (ee) {
document.removeEventListener('mousemove', func_move, false);
document.removeEventListener('mouseup', func_up, false);
};
document.addEventListener('mousemove', func_move, false);
document.addEventListener('mouseup', func_up, false);
})(); } else {
(function () {
var el = e.target; //当前点击元素，父div或者拖到div
var x1 = e.clientX - el.offsetLeft;
var y1 = e.clientY - el.offsetTop; var func_move = function (ee) {
var cur_el = ee.target;
if (cur_el.id && cur_el.id == 'parent') return false;
var x2 = 0;
var y2 = 0; x2 = ee.clientX - x1 ;
y2 = ee.clientY - y1 ;
x2 = x2 > 0 ? x2 : 0;
y2 = y2 > 0 ? y2 : 0; if (Math.abs(x2) > 5 || Math.abs(y2) > 5) {
cur_el.style.top = (y2) + 'px';
cur_el.style.left = (x2) + 'px';
}
}; var func_up = function (ee) {
el.removeEventListener('mousemove', func_move, false);
el.removeEventListener('mouseup', func_up, false);
};
el.addEventListener('mousemove', func_move, false);
el.addEventListener('mouseup', func_up, false);
})();
} }, false);
</script>
</body>
</html>
各位看看我们这个代码干的事情：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body { font: 12px 'PTSansRegular',Arial,Helvetica,sans-serif; background: #D1D1D1; }
ul, li { margin: 0; padding: 0}
li { list-style: none; } #tabs_container { width: 400px; height: 200px; background: white;}
#tabs { border-bottom: 1px solid #1C87D5; padding: 5px 5px 0; width: 690px; margin: 0 auto; }
#tabs li { padding: 5px 10px; cursor: pointer; display: inline-block; background: #1C87D5; color: White; }
#tabs li.sec { color: black;} #parent { width: 700px; height: 400px; background: white; margin: 0 auto; position: relative; }
#parent div { filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; font-weight:bold; background: red; position: absolute; }
</style>
</head>
<body>
<ul id="tabs" >
<li type="draw" class="sec">画矩形框</li>
<li type="drag">拖到矩形框</li>
</ul>
<div id="parent">
</div>
<div id="state"></div>
</body>
</html>
① parent容器的定位是relative
② 我们在parent里面画的div是absolute
③ 但是，我们div定位是根据鼠标的x/y确定的，而这个是相对于body的，所以我们这里会错位（因为div是相对于parent布局，不是body）
④ 为了解决错位问题，我们便要用x/y减去parent的offset top与left
此块单独处理问题不大，就怕页面中弹出层过多时候导致你已经分不清谁是谁的包含快了，所以便会出现错位问题，这也是同事迟迟不能解决问题的症结点。
z-index
扩展知识：http://www.qianduan.net/that-thing-on-the-z-index.html
说道定位就不得不提z-index，这个家伙在IE7以下又是一个坑爹的货，了不起哪天各位又会碰到，反正我组员就碰到了，在IE7下，这个就是个混蛋！！！
关于html堆栈的那块，各位可以看看博客园寒冬的博客，堆栈顺序对z-index影响很大，我这里就不描述了。
我们遇到z-index时候，会很天真的认为z-index设置的越大时候，便应该更靠近我们，但是定位元素多了后，却总是发现这样那样的bug一大堆！！！（IE7以下尤其恶心），具体这块的拓展可以看看聂微东大哥的博客，关于z-index的描述已经十分详尽了，我这里简单说下：
每一个定位元素都有其根元素，当根元素为定位元素时，该元素的子元素若是也出现定位元素，子元素将受到父元素z-index的制约。
借用东哥一句话，元素要靠前也是拼爹的！
inline与inline-block
关于PS中的问题，感觉没人关注，我这里也不花精力去描述了，但是有个东西应该提出来：
我们上次说了，其实IE6/7是支持inline-block的，只不过块级元素对其支持不是很好罢了，但是我这里想把inline-block再一次提出来说一下，因为我们可能被他的名字迷惑了！！！
inline-block便应该包含inline与block的特性，对不！
是的，他包含了block的特性，但是我不认为他包含了inline的特性，因为inline的特性的核心是inline boxes，那么我们的inline-block拥有吗？
PS：答案是拥有的，我私下搞了半个小时，昨天以为没有inline boxes，以为发现新大陆了，丢人啦，，，，
结语
我今天又唧唧歪歪说了一大堆，也不知道各位有没有什么收获呢，明天我们还是一起来研究点有意义的事情吧，我感觉我对行内元素还是不够熟悉，明天我们就一起看看行内元素哇？
很多朋友说我传图，不穿美女，其实不是我不传美女，而是我传了怕你们受不了啊！！！
【position也可以很复杂】当弹出层遇上了鼠标定位（下）的更多相关文章
- 【position也可以很复杂】当弹出层遇上了鼠标定位（上）
前言 周五时同事有一个关于弹出层的问题没有解决,但是面临下班问题,我有点不舒服,便叫回去周六过来解决,但是上周六病了,所以请了个假,于是故事发生啦.... 今天上班时候,组员们卡到了那个地方,然后结果 ...
- element ui 弹出组件的遮罩层在弹出层的上面的解决方法
<el-dialog title="收货地址" :visible.sync="dialogFormVisible" :modal-append-to-bo ...
- Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)
一.实际项目中有很多如下界面效果. 二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码: <!DOCTYPE html> <html> & ...
- 微信小程序弹出层点击穿透问题
问题描述:使用小程序的modal组件实现遮罩层效果时,会出现滚动穿透的问题,即遮罩层后面的页面依旧可以滚动. 解决方案: 给底层页面动态添加 position:fixed; 代码: wxml: < ...
- javascript实现掉落弹出层------Day29
顾名思义.所谓"掉落弹出层".就是出现一个弹出层,而出现的位置是从上方向下掉落.掉落到指定的位置停止,这样分析起来.和"右下角弹出提醒对话框"比起来,确有异曲同 ...
- easyDialog 简单、实用的弹出层组件
easyDialog 简单.实用的弹出层组件 使用背景 在完成导师需求时,导师要求寻找比一个layer弹出层组件体积小得多的.最好能嵌入在进HTML代码中而非src引用的弹出层组件,在这个需求下,我找 ...
- 用jQuery解决弹出层的问题
在BS 项目中 经常需要用到这种弹出层.做这种弹出层一般都会遇到下面几个问题:0,弹出层必须定义在input的下边显示.1,点击input弹出div层.2,点击div层外面任何地方,关闭div层.3, ...
- chrome浏览器上传图片反应很慢，延迟很久才弹出窗口
chrome浏览器上传图片反应很慢,延迟很久才弹出窗口 一个上传图片的控件,点击按钮上传图片,用chrome(谷歌浏览器)时,点击按钮后,要等好几秒才弹出文件选择窗口 可以试一下,把网络断开,这个问题 ...
- div样式position：fixed,不随屏幕滚动而滚动，导致屏幕太小时弹出层被遮挡，无法滚动查看的解决办法
window.onscroll = function () { var sl = -Math.max(document.body.scrollTop, document.documentElement ...
随机推荐
- 深入理解javascript函数系列第一篇——函数概述
× 目录 [1]定义 [2]返回值 [3]调用 前面的话 函数对任何一门语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即 ...
- 编译原理（简单自动词法分析器LEX）
编译原理(简单自动词法分析器LEX)源程序下载地址: http://files.cnblogs.com/files/hujunzheng/%E6%B1%87%E7%BC%96%E5%8E%9F%E7 ...
- javaweb -- 获取请求IP(附实现源码)
实现步骤如下: (1)新建一个java web工程 (2)新建servers包,新建类GetRequestIp,用来处理获取请求IP,GetRequestIp类完整代码如下: package serv ...
- [OpenCV] Samples 03: cout_mat
操作Mat元素时:I.at<double>(1,1) = CV_PI; /* * * cvout_sample just demonstrates the serial out capab ...
- 精美素材：40个漂亮的 PSD 贴纸模板《上篇》
贴纸经常被网页设计师用于为标注网站中的不同元素,以此吸引访客的注意.此外,使用贴纸也使网站更具吸引力.虽然设计者可以使用 Photoshop 制作贴纸,但他们也可以利用从互联网上下载现成的模板.这些模 ...
- 创建与使用Web API
今天做了一个练习,实现单独的Web API project.以前只是在ASP.NET MVC project内创建. 创建一个Web API project,可参考下面步骤: 点击OK之后,出现另外一 ...
- Think PHP项目在阿里云的虚拟主机上部署
购买完万网的虚拟主机后,今天终于把以前一个项目转成了PHP项目,我用的是TP框架,阿里的虚拟主机还是很方便上手的,在把数据库导入完后,用FTP把程序文件上传到服务器上,阿里的虚拟主机(Linux主机) ...
- js、jquery验证时间格式
下面验证的格式是2012-2-1 或2010-02-01 var reDate = /^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12 ...
- 通用easyui查询页面组件
easyui查询页面组件使用指南 本组件开发需求:信息系统的查询页面基本是包括:搜索区域,列表显示区域,按钮条. 1.录入一个查询语句(如:select * from Strudents),录入列表显 ...
- 使用MySQL Workbench导出MySQL数据库关系图
1. 点击MySQL Workbench中间Data Modeling下的Create EER Model From Existing Database: 2. 在Stored Connection中 ...