很简单的JS下拉,onmousemove事件触发独立下拉框,但是当鼠标离开后下拉依然存在,由于是独立的下拉框,所以用onmouseout事件的话不理想,鼠标移动到下拉菜单便消失。贴代码:
JS代码:
function menu_move(sthis,i,name,m){
var navH = $(sthis).offset().left;
for(var k=1;k<=m;k++){
if(i==k){
$('#'+name+k).css({"position":"absolute","margin-right":navH});
$('#'+name+k).show();
}
else{
$('#'+name+k).hide();
}
}
}
一级菜单:
<div class="fxnmenu">
<ul>
<li><a href="/invest/index.html?type=going" onmousemove="menu_move(this,2,'menid_',6)">我要理财<!--<span class="down"></span>--></a></li>
</ul>
</div>
独立下拉框:
<div class="fxnnav fxnnav_invest" style="display: none;" id="menid_2">
<table>
<tr><td><a href="#">推荐标</a></td></tr>
<tr><td><a href="#">净值标</a></td></tr>
</table>
</div>
æ¢ç¶ä½ 使ç¨çæ¯JQï¼é£å°±å¯ä»¥ç¨å¦å¤ä¸ä¸ªæ¹æ³
$(".fxnmenu ul liï¼.fxnnav_invest").hover(function(){é¼ æ overçæ¶åæ§è¡æ¾ç¤º},function(){é¼ æ outçæ¶åæ§è¡éè});追é®ä¸ç¨å¦å¤ä¸ä¸ªåæ³ï¼å°±è¿ä¸ªåæ³çè¯è½å®ç°åï¼å°±å¨é¼ æ 移å¼çæ¶ååä¸ä¸ªæ¸ é¤æè ä»ä¹å¨ä½ã
追çonmouseoverè¿ä¸ªææ¯é¼ æ 移å¨å°å½å对象ä¸è§¦åçæ¹æ³ã
è¿æé¼ æ 移å¨å°ä¸ææ¡ä¹åå°±æ¶å¤±çè¯ï¼ä½ è¿æ¯éè¦å¢å ä¸ä¸ªæ¹æ³ãä¸æ ·æ¯onmouseoveræ¹å¼ï¼é¼ æ æ¬æµ®çæ¶åDOMä¸éèã
å·²ç»æ¹æonmouseoveräºï¼ç¬¬ä¸ç§ä¸ç¥éæä¹ç解ï¼è½è´´ä¸ä»£ç æåï¼
追çå~æä¸é¢é£ä¸ªhover()äºä»¶ä¸æ¯å¾å¥½çä¹ã
ä½ æ¹æonmouseoverä¹åè¿æä»ä¹é®é¢åï¼
æ¹æonmouseoverä¹åä¸æ ·çãå¾çå°±æ¯æç»ææï¼æé¼ æ 移å°å ¶å®å°æ¹ï¼è¿ä¸ªä¸æä¹æ¾ç¤ºçã