关于DIV隐藏和关闭有关问题

2013-01-17

关于DIV隐藏和关闭问题htmlheadmeta http-equivContent-Type contenttext/html charsetutf-8

关于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>
        <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>
<script type="text/javascript">
    window.onload=function(){
        document.getElementsByTagName("html")[0].onclick=function(e){
            document.getElementById("div_bg").style.display="none";
        }
    };
    function stopclick(e){
        document.getElementById("div_bg").style.display="block";
        if ( e && e.stopPropagation )
            e.stopPropagation();
        else
            window.event.cancelBubble = true;
    }
</script>

[解决办法]
不应该是点击div...., 只应该是在div之上就不可以隐藏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css" >
    .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 type="text/javascript" >
    function closediv() {
        setTimeout(function () {
            if (document.getElementById("div_bg").getAttribute("ondiv") == "0") {
                document.getElementById("div_bg").style.display = "none"; 
 
            }
        }, 800);
    }

    function showdiv() {
        document.getElementById("div_bg").style.display = "block";
    }

    function setFlag(obj, v) {
        obj.setAttribute("ondiv", v);
    }
</script>
</head>
<body>
<input type="text" onfocus="showdiv()" onclick="showdiv()"  onblur="closediv()"/>
<div class="div_bg" id="div_bg" ondiv="0" onmouseover="setFlag(this,1)" onmouseout="setFlag(this,0);closediv();" >
    <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>

热点排行

Bad Request.

JavaScript

关于DIV隐藏和关闭有关问题