怎么点击空白地方消失

$("#test1").blur(function(){                
    $(".yc_div").hide();       
})

解决方案 »

  1.   


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#test1").click(function(event){
    event.stopPropagation();
            $("#yc_div").show();
            })
        $(document).click(function(){
            $("#yc_div").hide();
            })
    });
    </script>
    <style type="text/css">
         *{
             margin:0;
             padding:0;
             }
         .div{
             float:left;
             position:relative;
             margin:100px;
             }
         .div_input{
             width:50px;
             height:25px;
             border:1px solid #DCDCDC;
             }
         .yc_div{
             width:200px;
             height:100px;
             border:1px solid #00BCF3;
             position:absolute;
             top:0;
             left:52px;
             display:none;
             }
        </style>   
    </head>
     
    <body>
    <div class="div">   
        <input class="div_input" id="test1" type="text"/>  
        <div id="yc_div" class="yc_div"> hhhh</div>           
        </div>
    </body>
    </html>
      

  2.   

        $(".div_input").click(function(){
    $(".yc_div").toggle();
    return false;
    })
      

  3.   

    请问如果我想 按回车键 才显示div 应该怎么做啊
      

  4.   

    请问如果我想 按回车键 才显示div 应该怎么做啊
    那貌似要加键盘监听诶 
      

  5.   

    请问如果我想 按回车键 才显示div 应该怎么做啊
    那貌似要加键盘监听诶 
    是的 请问下jquery是怎么使用的
      

  6.   

    请问如果我想 按回车键 才显示div 应该怎么做啊
    那貌似要加键盘监听诶 
    是的 请问下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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#test1").click(function(event){
            event.stopPropagation();
    $(this).keypress(function(event) {
    var key = event.which; 
    if (key == 13) {
    $("#yc_div").show();
    }
    })
            
            })
        $(document).click(function(){
            $("#yc_div").hide();
            })
    });
    </script>
    <style type="text/css">
         *{
             margin:0;
             padding:0;
             }
         .div{
             float:left;
             position:relative;
             margin:100px;
             }
         .div_input{
             width:50px;
             height:25px;
             border:1px solid #DCDCDC;
             }
         .yc_div{
             width:200px;
             height:100px;
             border:1px solid #00BCF3;
             position:absolute;
             top:0;
             left:52px;
             display:none;
             }
        </style>   
    </head>
      
    <body>
    <div class="div">   
        <input class="div_input" id="test1" type="text"/>  
        <div id="yc_div" class="yc_div"> hhhh</div>           
        </div>
    </body>
    </html>
      

  7.   

    请问如果我想 按回车键 才显示div 应该怎么做啊
    那貌似要加键盘监听诶 
    是的 请问下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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#test1").click(function(event){
            event.stopPropagation();
    $(this).keypress(function(event) {
    var key = event.which; 
    if (key == 13) {
    $("#yc_div").show();
    }
    })
            
            })
        $(document).click(function(){
            $("#yc_div").hide();
            })
    });
    </script>
    <style type="text/css">
         *{
             margin:0;
             padding:0;
             }
         .div{
             float:left;
             position:relative;
             margin:100px;
             }
         .div_input{
             width:50px;
             height:25px;
             border:1px solid #DCDCDC;
             }
         .yc_div{
             width:200px;
             height:100px;
             border:1px solid #00BCF3;
             position:absolute;
             top:0;
             left:52px;
             display:none;
             }
        </style>   
    </head>
      
    <body>
    <div class="div">   
        <input class="div_input" id="test1" type="text"/>  
        <div id="yc_div" class="yc_div"> hhhh</div>           
        </div>
    </body>
    </html>
    谢谢了 还有请问下 
     1     这点击空白的地方 div消失 怎么才能我点击div以为的地方div消失 而点击div的时候 div不消失
           2 我要左键双击点击div的时候 div才消失 应该怎么做啊
      

  8.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#test1").click(function(event){
            event.stopPropagation();
            $(this).keypress(function(event) {
                var key = event.which; 
                if (key == 13) {
                    $("#yc_div").show();
                }
            })
             
            })
       $("#yc_div").dblclick(function() {
        $(this).hide();
        })
     
     
        $(document).click(function(event){
         var event = event || window.event;
         if(event.target.id != "yc_div") {
         $("#yc_div").hide();
         }
            
        })
    });
    </script>
    <style type="text/css">
         *{
             margin:0;
             padding:0;
             }
         .div{
             float:left;
             position:relative;
             margin:100px;
             }
         .div_input{
             width:50px;
             height:25px;
             border:1px solid #DCDCDC;
             }
         .yc_div{
             width:200px;
             height:100px;
             border:1px solid #00BCF3;
             position:absolute;
             top:0;
             left:52px;
             display:none;
             }
        </style>   
    </head>
       
    <body>
    <div class="div">   
        <input class="div_input" id="test1" type="text"/>  
        <div id="yc_div" class="yc_div"> hhhh</div>           
        </div>
    </body>
    </html>
    楼主 试下 看看
      

  9.   

    这个用jquery,关键字 事件冒泡$(function(){
       //点到页面(非目标div上)上隐藏div
       $(document).click(function(){
           $('#div').hide();
       });
       //阻止冒泡(即不隐藏div)
       $('#div').click(function(e){
          e.stopPropagation();
       });
    });大概代码是这样子,至于有没有写错就不得而知了,最近也有这个功能需求