首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

一个很常用的JS效果,小弟我想了很久都不会,大家帮忙来看看

2013-11-15 
一个很常用的JS效果,我想了很久都不会,大家帮忙来看看我点击一个input typetext idtxt1 /,弹出一

一个很常用的JS效果,我想了很久都不会,大家帮忙来看看
我点击一个<input type='text' id='txt1' />,弹出一个<div id='div1'></div>,然后我点击别处,div1就隐藏掉。
"别处"指的是 除了txt1和div1外的其他地方。

我能想到的是 txt1和div1用个<div id='div_wrap'></div>包裹起来,然后对div_wrap用focus和blur做。

大家有好点的办法吗?

先谢谢各位大侠了。
[解决办法]
document绑定click事件,隐藏。
#txt1、#div1绑定click事件,并阻止冒泡即可。

或者document绑定click事件,判断点击源不在#txt1、#div1时,隐藏。

明白不?
[解决办法]
这个用jQuery实现比较简单:

<!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>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#txt1").click(function () {
                $("#div1").show();
            });

            $(document).click(function (e) {
                e = window.event;
                var obj = $(e.srcElement 
[解决办法]
 e.target);
                if ($(obj).is("#txt1,#div1")) {
                    $("#div1").show();
                } else {
                    $("#div1").hide();
                }
            });
        });
    </script>
</head>
<body>
    <input type="text" id="txt1" />
    <div id="div1" style="display: none">
        div1
    </div>
</body>
</html>

热点排行