<!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>select</title>
<link href="style/select.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="style/jquery-1.3.2.min.js"></script>
<style>
*{ margin:0; border:0; padding:0;}
body{ font-size:12px; font-family:"宋体";}
ul{ list-style:none;}
a{ text-decoration:none; color:#666;}.box{ width:500px; margin:100px auto;}.select{ height:20px; width:130px; background:url(../images/bg.png) repeat-x 0 bottom; padding:0 0 0 15px; border:1px solid #2e7a01; position:relative; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
.tit{ color:#fff; cursor:pointer; line-height:20px;}
.select_xl_box{background:#f0efea; border:1px solid #aaaaaa; -moz-border-radius: 4px; -webkit-border-radius: 4px; width:208px; padding:6px 4px 6px 6px; position:absolute; top:23px; left:-1px; display:none;}
.select_xl{ width:200px; overflow:hidden; overflow-y:scroll; height:150px; background:#f0efea; padding:4px;}.block{ display:block;}.select_list{}
.select_list li{ display:block; overflow:hidden; padding:3px 0 3px 0; border-bottom:1px dotted #ccc;}
</style>
</head>
<body>
<div class="box">
<div class="select" id="ad"><span class="tit">点我啊</span>
<div class="select_xl_box">
<div class="select_xl">
<ul class="select_list">
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
</ul>
</div>
</div>
</div>
<script>
$("#ad").click(
function(){
$(".select_xl_box").addClass("block");
}
)
$("#ad").mouseout(
function(){
$(".select_xl_box").css({display:none});
}
)
</script>
</div>
</body>
</html>div 模拟selectjquery点击选取当前和离开隐藏的问题jquery应该怎么写啊。各位高手小弟在线等啊
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<style type="text/css">
*{ margin:0; border:0; padding:0;}
body{ font-size:12px; font-family:"宋体";}
ul{ list-style:none;}
a{ text-decoration:none; color:#666;}.box{ width:500px; margin:100px auto;}.select{ height:20px; width:130px; background:url(../images/bg.png) repeat-x 0 bottom; padding:0 0 0 15px; border:1px solid #2e7a01; position:relative; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
#tit{ color:#fff; cursor:pointer; line-height:20px;}
.select_xl_box{background:#f0efea; border:1px solid #aaaaaa; -moz-border-radius: 4px; -webkit-border-radius: 4px; width:208px; padding:6px 4px 6px 6px; position:absolute; top:23px; left:-1px; display:none;}
.select_xl{ width:200px; overflow:hidden; overflow-y:scroll; height:150px; background:#f0efea; padding:4px;}
.select_list{}
.select_list li{ display:block; overflow:hidden; padding:3px 0 3px 0; border-bottom:1px dotted #ccc;}
</style>
</head>
<body bgcolor="#336699">
<div style="filter:alpha(opacity=20);background:#ffffff;width:600">
< span style="position:relative;color:yellow">不半透明</span>
</div>
<div style="filter:alpha(opacity=50);background:#ffffff;width:600">
< span style="position:relative;color:yellow">不半透明</span>
</div>
<div style="filter:alpha(opacity=80);background:#ffffff;width:600">
< span style="position:relative;color:yellow">不半透明</span>
</div><div class="select" id="ad">
<span id="tit">Click</span>
<div id="parentDiv" style="display:none">
<ul class="select_list">
<li><input type="checkbox"/>1111111111</li>
<li><input type="checkbox"/>1111111111</li>
<li><input type="checkbox"/>1111111111</li>
<li><input type="checkbox"/>1111111111</li>
<li><input type="checkbox"/>1111111111</li>
</ul>
</div>
<script>
var ePoint="";
function document.onclick()
{
var doc = document.getElementById("parentDiv");
var id = $(event.srcElement).parents("div").attr("id");
if(doc.style.display == "none")
{
return;
}
if(id != "hdivSelDivision" && id!="ad")
{
doc.style.display = "none";
}
}
$("#tit").click(function(){
document.getElementById("parentDiv").style.display = "inline";
ePoint = window.event.srcElement;
});
</script>
</div>
</body>
</html>
基本原理就是这样了
代码在IE7下正常运行
别忘了改一下调用的js文件地址
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<style type="text/css">
*{ margin:0; border:0; padding:0;}
body{ font-size:12px; font-family:"宋体";}
ul{ list-style:none;}
.select{ height:20px; width:130px; background:url(../images/bg.png) repeat-x 0 bottom; padding:0 0 0 15px; border:1px solid #2e7a01; position:relative; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
#tit{ color:#fff; cursor:pointer; line-height:20px;}
.select_list li{ display:block; overflow:hidden; padding:3px 0 3px 0; border-bottom:1px dotted #ccc;}
</style>
</head>
<body>
<div class="select" id="ad">
<span id="tit">Click</span>
<div id="parentDiv" style="display:none">
<ul class="select_list">
<li><input type="checkbox"/>1111111111</li>
<li><input type="checkbox"/>1111111111</li>
<li><input type="checkbox"/>1111111111</li>
<li><input type="checkbox"/>1111111111</li>
<li><input type="checkbox"/>1111111111</li>
</ul>
</div>
<script>
var ePoint="";
function document.onclick()
{
var doc = document.getElementById("parentDiv");
var id = $(event.srcElement).parents("div").attr("id");
if(doc.style.display == "none")
{
return;
}
if(id != "hdivSelDivision" && id!="ad")
{
doc.style.display = "none";
}
}
$("#tit").click(function(){
document.getElementById("parentDiv").style.display = "inline";
ePoint = window.event.srcElement;
});
</script>
</div>
</body>
</html>
忘了删除原来的测试代码了 看这个吧
没明白
function(){
$(".select_xl_box").show()
}
).mouseout(
function(){
$(".select_xl_box").hide();
}
)