JS 点击其他处菜单收回
点击一个div，下面出来一个ul列表，现在只有再点一次div，ul才会回去，头儿告诉我，这样是不行滴！要我做点击其他处就可以收回菜单。不知道效果的可以去QQ邮箱——>>收...
点击一个div，下面出来一个ul列表，现在只有再点一次div，ul才会回去，头儿告诉我，这样是不行滴！要我做点击其他处就可以收回菜单。
不知道效果的可以去QQ邮箱——>>收件箱，然后点击右侧的“标记为”或者“移动到”，再点击页面其他处，菜单就收回去了，要的就是那个效果。
先谢谢啊。
麻烦你们试过再说好不好，都不行。 展开
不知道效果的可以去QQ邮箱——>>收件箱，然后点击右侧的“标记为”或者“移动到”，再点击页面其他处，菜单就收回去了，要的就是那个效果。
先谢谢啊。
麻烦你们试过再说好不好，都不行。 展开
展开全部
兼容ie和FF：
<style type="text/css">
#con{ display:none; width:100px; height:100px; position:relative; left:10px; top:10px; border:1px #000000 solid;background-color:#ff0000;}
</style>
<script type="text/javascript">
document.onclick=function(e){
e = window.event || e;
var srcElement = e.srcElement || e.target;
if(srcElement.id=="con" || (srcElement.id!="t"&&$("con").style.display!="block")) return;
if($("con").style.display!="block")
$("con").style.display="block";
else
$("con").style.display="none";
}
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
</script>
<body>
<div id=t style="cursor:pointer;">点击展开列表</div>
<div id="con">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
</body>
<style type="text/css">
#con{ display:none; width:100px; height:100px; position:relative; left:10px; top:10px; border:1px #000000 solid;background-color:#ff0000;}
</style>
<script type="text/javascript">
document.onclick=function(e){
e = window.event || e;
var srcElement = e.srcElement || e.target;
if(srcElement.id=="con" || (srcElement.id!="t"&&$("con").style.display!="block")) return;
if($("con").style.display!="block")
$("con").style.display="block";
else
$("con").style.display="none";
}
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
</script>
<body>
<div id=t style="cursor:pointer;">点击展开列表</div>
<div id="con">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
</body>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 99%;
border-top: 1px solid white;
}
button {
width: 150px;
text-align: center;
}
ul {
list-style: none;
border: 2px solid #ccc;
width: 150px;
margin-top: 10px;
display: none;
}
li {
line-height: 30px;
text-align: center;
border-bottom: 1px dashed #000;
cursor: pointer;
}
li:hover {
background-color: #eee;
}
.last {
border: none;
}
div {
margin: 100px 200px;
}
</style>
</head>
<body>
<div>
<button>菜单</button>
<ul>
<li>你点我呀</li>
<li>我草，你还真敢点</li>
<li>你再点下试试</li>
<li>我特么生气了</li>
<li>I need AV</li>
</ul>
</div>
<script type="text/javascript">
var btn = document.getElementsByTagName("button")[0];
var ul = document.getElementsByTagName("ul")[0];
var timer = null;
btn.onclick = function () {
ul.style.display = "block";
}
ul.onmouseover = function() {
clearTimeout(timer);
}
ul.onmouseout = function() {
timer = setTimeout(function() {
ul.style.display = "none";
},1500);
}
document.body.onclick = function(e) {
e = e || windou.event;
var target = e.target || e.srcElement;
if (target != btn) {
ul.style.display = "none";
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 99%;
border-top: 1px solid white;
}
button {
width: 150px;
text-align: center;
}
ul {
list-style: none;
border: 2px solid #ccc;
width: 150px;
margin-top: 10px;
display: none;
}
li {
line-height: 30px;
text-align: center;
border-bottom: 1px dashed #000;
cursor: pointer;
}
li:hover {
background-color: #eee;
}
.last {
border: none;
}
div {
margin: 100px 200px;
}
</style>
</head>
<body>
<div>
<button>菜单</button>
<ul>
<li>你点我呀</li>
<li>我草，你还真敢点</li>
<li>你再点下试试</li>
<li>我特么生气了</li>
<li>I need AV</li>
</ul>
</div>
<script type="text/javascript">
var btn = document.getElementsByTagName("button")[0];
var ul = document.getElementsByTagName("ul")[0];
var timer = null;
btn.onclick = function () {
ul.style.display = "block";
}
ul.onmouseover = function() {
clearTimeout(timer);
}
ul.onmouseout = function() {
timer = setTimeout(function() {
ul.style.display = "none";
},1500);
}
document.body.onclick = function(e) {
e = e || windou.event;
var target = e.target || e.srcElement;
if (target != btn) {
ul.style.display = "none";
}
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
思路：只要判断点击的对象不是目标 div 就可以实现！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
document.onclick=你收回DIV的FUNCTION;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给你一个我以前写的吧，刚才根据你的需求改了下，自己去参考（重点就是个监听的对象判断问题）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style-type: none;
}
#flo{
width: 1000px;
height: 250px;
overflow: hidden;
background-color:gray;
}
#qqq{
width: 1000px;
height:0px;
overflow: hidden;
}
#qqq>ul{
width: 1016px;
height: 250px;
}
/*@keyframes mo{
from{transform: scale(1);}
to{transform: scale(0);}
}*/
#flo li{
width: 250px;
height: 250px;
border: solid 1px #000000;
float: left;
margin: 0 0 0 2px;
}
#flo li:hover{
box-shadow: 0 0 50px 1px #000000 inset;
animation: mo 0.2s 0.1s infinite ease-out;
}
</style>
</head>
<body>
<div id="flo">
<div id="qqq">
<ul>
<li style="background-color:red;">1</li>
<li style="background-color:orange;">2</li>
<li style="background-color:yellow;">3</li>
<li style="background-color:green;">4</li>
<li style="background-color:lightcoral;">5</li>
<li style="background-color:bule;">6</li>
</ul>
</div>
</div>
</body>
<script>
var qq = document.getElementById("qqq"),
set,
sett,
f = document.getElementById("flo");
window.onload = function(){
//f.addEventListener("mouseover",big);
//f.addEventListener("mouseout",sma);
f.addEventListener("click",big);
document.addEventListener("click",function(e){
if(e.target!==f){
clearInterval(set);
var ww = parseInt(qq.style.height);
sett = setInterval(function(){
var www = ww-10;
ww=www;
www>-1?qq.style.height = www+"px":clearInterval(sett);
/*
if(www>-1){
qq.style.height = www+"px";
}else{
clearInterval(sett);
}
*/
},15);
}
});
}
function big(){
clearInterval(sett);
var ww = qq.style.height;
ww==""?ww=0:ww=ww;
set = setInterval(function(){
var www = parseInt(ww)+10;
ww=www;
www<251?qq.style.height = www+"px":clearInterval(set);
},15);
}
function sma(){
if(e.target!==f){
clearInterval(set);
var ww = parseInt(qq.style.height);
sett = setInterval(function(){
var www = ww-10;
ww=www;
www>-1?qq.style.height = www+"px":clearInterval(sett);
},15);
}
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style-type: none;
}
#flo{
width: 1000px;
height: 250px;
overflow: hidden;
background-color:gray;
}
#qqq{
width: 1000px;
height:0px;
overflow: hidden;
}
#qqq>ul{
width: 1016px;
height: 250px;
}
/*@keyframes mo{
from{transform: scale(1);}
to{transform: scale(0);}
}*/
#flo li{
width: 250px;
height: 250px;
border: solid 1px #000000;
float: left;
margin: 0 0 0 2px;
}
#flo li:hover{
box-shadow: 0 0 50px 1px #000000 inset;
animation: mo 0.2s 0.1s infinite ease-out;
}
</style>
</head>
<body>
<div id="flo">
<div id="qqq">
<ul>
<li style="background-color:red;">1</li>
<li style="background-color:orange;">2</li>
<li style="background-color:yellow;">3</li>
<li style="background-color:green;">4</li>
<li style="background-color:lightcoral;">5</li>
<li style="background-color:bule;">6</li>
</ul>
</div>
</div>
</body>
<script>
var qq = document.getElementById("qqq"),
set,
sett,
f = document.getElementById("flo");
window.onload = function(){
//f.addEventListener("mouseover",big);
//f.addEventListener("mouseout",sma);
f.addEventListener("click",big);
document.addEventListener("click",function(e){
if(e.target!==f){
clearInterval(set);
var ww = parseInt(qq.style.height);
sett = setInterval(function(){
var www = ww-10;
ww=www;
www>-1?qq.style.height = www+"px":clearInterval(sett);
/*
if(www>-1){
qq.style.height = www+"px";
}else{
clearInterval(sett);
}
*/
},15);
}
});
}
function big(){
clearInterval(sett);
var ww = qq.style.height;
ww==""?ww=0:ww=ww;
set = setInterval(function(){
var www = parseInt(ww)+10;
ww=www;
www<251?qq.style.height = www+"px":clearInterval(set);
},15);
}
function sma(){
if(e.target!==f){
clearInterval(set);
var ww = parseInt(qq.style.height);
sett = setInterval(function(){
var www = ww-10;
ww=www;
www>-1?qq.style.height = www+"px":clearInterval(sett);
},15);
}
}
</script>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
