cari

Rumah >hujung hadapan web >tutorial js >js menyelesaikan masalah tidak dapat memilih dalam kemahiran drop-down_javascript pilih

js menyelesaikan masalah tidak dapat memilih dalam kemahiran drop-down_javascript pilih

WBOY
WBOYasal
2016-05-16 16:34:081593semak imbas

Apabila kotak lungsur pilih muncul dalam acara tetikus, kotak lungsur pilih tidak boleh dipilih:

var o = e.relatedTarget ||. e.toElement;//Objek yang dialihkan ke bawah pertimbangan adalah batal apabila dialihkan ke pilihan di atas dan di bawah, dan tidak ditentukan untuk firefox dan seterusnya. .
jika (!o) kembali; //Keluar untuk pilihan tanpa menyembunyikan

Contoh kod lengkap ialah: 

<!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>


Apabila tetikus dialihkan ke atas, pemilihan tidak akan dipilih lagi.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Analisis mengenai prinsip lulus parameter apabila jquery merujuk kepada method_jqueryArtikel seterusnya：Analisis mengenai prinsip lulus parameter apabila jquery merujuk kepada method_jquery

Artikel berkaitan

Lihat lagi