首页 新闻 会员 周边 捐助

求指导一段Jquery代码

0
悬赏园豆:30 [已解决问题] 解决于 2014-04-11 10:04

页面中有一个Input,和一个隐藏的Div

<input type="text" id="receiver">
<div style="display:none" id="UserList">
<input type="checkbox" id="check_1"><input type="checkbox" id="check_2">
</div>

现在receiver获得焦点后在下方显示DIV,单击页面空白处隐藏DIV(单击到receiver或DIV区域不隐藏)

 $("#receiver").on("focus", function () {
            $("#UserList").css("top", $(this).position().top + $(this).outerHeight()).css("left", $(this).position().left);
            $("#UserList").show();
        });

求隐藏DIV的代码,要求不要把receiver作为判断的依据,就是指当换了另一个Input与这个Div关联时也可以用,谢谢指导!

happydaily的主页 happydaily | 菜鸟二级 | 园豆:260
提问于:2014-04-10 22:14
< >
分享
最佳答案
0
 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6     <title>单击document div隐藏</title>
 7     <style>
 8         #UserList {
 9             width: 600px;
10             height: 100px;
11             background-color: #ccc;
12         }
13     </style>
14     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
15     <script>
16         $(function() {
17             $(".txt").on("click focus", function() {
18                 $("#UserList").show();
19                 return false;
20             });
21             $(document).click(function(event) {
22                 $("#UserList").hide();
23             });
24             $("#UserList").click(function(e) {
25 
26                 e = e || event;
27                 e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
28             });
29         })
30     </script>
31 </head>
32 
33 <body>
34     <input type="text" id="receiver" class="txt">
35     <input type="text" id="receiver" class="txt">
36     <input type="text" id="receiver" class="txt">
37     <input type="text" id="receiver" class="txt">
38     <input type="text" id="receiver" class="txt">
39     <div style="display:none" id="UserList">
40         <input type="checkbox" id="check_1">
41         <input type="checkbox" id="check_2">
42     </div>
43 </body>
44 
45 </html>

1.event.stopPropagation(); 

   事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(比如执行了超链接的跳转)

2.return false;

   事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如没有执行超链接的跳转)

3.event.preventDefault(); 

  事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)

收获园豆:30
小乔布斯 | 菜鸟二级 |园豆:446 | 2014-04-11 09:54
其他回答(2)
0

帮顶。

单恋 | 园豆:678 (小虾三级) | 2014-04-11 09:22
0
  $(document).click(function (event) {
            var eo = $(event.target);
            if (eo.attr('id') != "receiver") {
              //隐藏
            }
        });

要求不要把receiver作为判断的依据,可以用变量,封装,这个自己就能搞了吧。

Rookier | 园豆:652 (小虾三级) | 2014-04-11 09:31
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册