recherche

Maison >interface Web >js tutoriel >js résout le problème de l'impossibilité de sélectionner les compétences de sélection drop-down_javascript

js résout le problème de l'impossibilité de sélectionner les compétences de sélection drop-down_javascript

WBOY
WBOYoriginal
2016-05-16 16:34:081593parcourir

Lorsque la zone déroulante de sélection apparaît dans l'événement de survol, la zone déroulante de sélection ne peut pas être sélectionnée Solution :

var o = e.ratedTarget || e.toElement;//L'objet déplacé vers sous jugement est nul lorsqu'il est déplacé vers l'option ci-dessus et ci-dessous, et non défini pour Firefox et ainsi de suite. .
if (!o) return; //Quitter l'option sans se cacher

L'exemple de code complet est : 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;list-style:none;border:0;}
.pop_blue{ position:absolute; cursor:pointer; padding:10px;}
.pop_blue span{ display:inline-block; width:24px; height:32px; background: url(../images/pop_blue.png) no-repeat;}

.map_xf .rud1{width:210px; position:absolute;border:1px solid #ddd; display:none; background-color:#fff;padding:17px 25px;}
.map_xf .rud1 li{margin:0 0 8px;}
.map_xf .rud1 input,.map_xf .rud1 select{height:22px;}
</style>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('.pop_blue').hover(
function(){
$(this).find('.rud1').show();
$(this).css("z-index","9999");
},
function(e){
var o = e.relatedTarget || e.toElement;//判断下移动到的对象，移动到option上ie下是null，firefox等为undefined。。
if (!o) return;//为option退出不隐藏

$(this).find('.rud1').hide();
$(this).css("z-index","0");
}
)
})
</script>
</head>

<body>
<div style="position:relative;width:100px;height:100px">
<div class="pop_blue" style="top:0px; left:0;"> <span>鼠标移上</span><i></i>
<div class="rud1 font12" style="top:10px;left:40px; display:none;padding:50px;background:blue;">
<ul>
<li>
<select class="w100" id="dan">
<option value="选择单元" selected="">选择单元</option>
<option value="选择单元" selected="">选择单元1</option>
<option value="选择单元" selected="">选择单元2</option>
<option value="选择单元" selected="">选择单元3</option>
<option value="选择单元" selected="">选择单元4</option>
</select>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>


Lorsque la souris est déplacée vers le haut, la sélection ne sera plus sélectionnée.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Analyse sur le principe du passage de paramètres lorsque jquery fait référence à méthodes_jqueryArticle suivant：Analyse sur le principe du passage de paramètres lorsque jquery fait référence à méthodes_jquery

Articles Liés

Voir plus