求指导一段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关联时也可以用，谢谢指导！
最佳答案
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
其他回答(2)
0
帮顶。
0
$(document).click(function (event) { var eo = $(event.target); if (eo.attr('id') != "receiver") { //隐藏 } });
要求不要把receiver作为判断的依据，可以用变量，封装，这个自己就能搞了吧。
