关于DIV隐藏和关闭有关问题
日期：2014-05-16 浏览次数：20517 次
关于DIV隐藏和关闭问题
这段html代码在input获取鼠标焦点的时候会显示div，当丢失焦点的时候DIV会被隐藏。
由于在于div显示的内容比较多时需要用到滚动条，但是想要用鼠标拖动滚动条的时候input就会失去焦点，从而div被关闭。
高手们能不能帮忙解决下div在失去焦点的时候自动关闭，但是却不能再用鼠标拖动滚动条的时候关闭。
------解决方案--------------------
我觉得你的思路有问题：input离开焦点就隐藏了，那就木有办法再显示（在你点滚动条前就隐藏）
我想这样改一下：鼠标点击在input与div身上就显示div，点其他任意地方就隐藏div。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.div_bg {
border: 1px solid #9b9b9b;overflow: auto;float: left;position: fixed;width: 242px;
height: 266px;z-index: 9999;background-color: #fff;display: none;
}
.div_bg ul li {
line-height: 32px;height: 32px;padding: 0px 8px;text-align: left;
}
.div_bg ul li:hover {
background-color: #d8edfb;border-top: 1px solid #9b9b9b;
border-bottom: 1px solid #9b9b9b;line-height: 30px;height: 30px;cursor: pointer;
}
</style>
<script>
function closediv() {
document.getElementById("div_bg").style.display = "none";
}
function showdiv() {
document.getElementById("div_bg").style.display = "block";
}
</script>
</head>
<body>
<input type="text" onfocus="showdiv()" onblur="closediv()"/>
<div class="div_bg" id="div_bg">
<ul>
<li>11111111111111111</li>
<li>22222222222222222</li>
<li>33333333333333333</li>
<li>44444444444444444</li>
<li>11111111111111111</li>
<li>22222222222222222</li>
<li>33333333333333333</li>
<li>44444444444444444</li>
<li>11111111111111111</li>
<li>22222222222222222</li>
<li>33333333333333333</li>
<li>44444444444444444</li>
<li>11111111111111111</li>
<li>22222222222222222</li>
<li>33333333333333333</li>
<li>44444444444444444</li>
</ul>
</div>
</body>
</html>
这段html代码在input获取鼠标焦点的时候会显示div，当丢失焦点的时候DIV会被隐藏。
由于在于div显示的内容比较多时需要用到滚动条，但是想要用鼠标拖动滚动条的时候input就会失去焦点，从而div被关闭。
高手们能不能帮忙解决下div在失去焦点的时候自动关闭，但是却不能再用鼠标拖动滚动条的时候关闭。
------解决方案--------------------
我觉得你的思路有问题：input离开焦点就隐藏了，那就木有办法再显示（在你点滚动条前就隐藏）
我想这样改一下：鼠标点击在input与div身上就显示div，点其他任意地方就隐藏div。
<input type="text" id="a" onclick="stopclick(event)" />
<div class="div_bg" id="div_bg" onclick="stopclick(event)">
<ul>
<li>点这里也不隐藏哦</li>
<li>22222222222222222</li>
<li>33333333333333333</li>
&nbs
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
