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

我点击一个<input type='text' id='txt1' />，弹出一个<div id='div1'></div>，然后我点击别处，div1就隐藏掉。
"别处"指的是 除了txt1和div1外的其他地方。我能想到的是 txt1和div1用个<div id='div_wrap'></div>包裹起来，然后对div_wrap用focus和blur做。大家有好点的办法吗？先谢谢各位大侠了。

解决方案 »

  1.   

    document绑定click事件，隐藏。
    #txt1、#div1绑定click事件，并阻止冒泡即可。或者document绑定click事件，判断点击源不在#txt1、#div1时，隐藏。明白不？
      

  2.   

    楼上的是一种思路，另外如果类似autoComplete那样的效果，你可以绑定那个元素的mouseover等等事件，然后做出相应的处理.
      

  3.   


    根据你的提示，我用事件源做了，但是还有点问题要请教。
    我的代码如下：
    $(document).live("click", function (e) {
                    if (($(e.target).attr("id") != "action_station") && ($(e.target).attr("id") != "tab")) {
                        $("#tab").css("display", "none");
                    }
                });
    代码说明： #action_station是个text，倒是没问题；但是#tab是个div，#tab里面还有div ul img等等，其中li的数量不确定，我这代码写的就有问题了。当点击#tab里面的li img时，#tab也会隐藏。
    继续求思路。
    先谢谢大侠了。
      

  4.   

    这个用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>
      

  5.   

    忘记说了，#div1里面还有div ul img等，其中li的数量不确定。你的方法，当点击#div1里面的li  img 时，#div1也会隐藏吧。
      

  6.   


    if ($(obj).is("#txt1,#div1,#div1 *")) {
                        $("#div1").show();
                    } else {
                        $("#div1").hide();
                    }修改一下， 加上子控件
      

  7.   

    e = window.event;
    var obj = $(e.srcElement || e.target);jquery寫那么多的兼容代碼是干什麽用的，還需要這樣寫，你這是兼容撒？
      

  8.   


    if ($(obj).is("#txt1,#div1,#div1 *")) {
                        $("#div1").show();
                    } else {
                        $("#div1").hide();
                    }修改一下， 加上子控件
    大侠，照着你的做，真的成功了。谢谢上面所有的大侠！
    结贴给分。