Foros del Web - Ver Mensaje Individual - Hacer desaparecer un div cuando ocurran dos 2 cosas

America|UNK · #2 (**permalink**) 26/11/2013, 11:48

Código javascript:

Ver original<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
 
    var result = $("#result");
 
    $("#search").keyup(function(){
        result["slide" + ($(this).val().length >= 2 ? "Down" : "Up")]();
    });
    
    //es un tipo de simulación de "blur" de cualquier objeto
    //si el objeto clickeado no contiene clase no_cerrar, el DIV desaparece (slideUp)
    
    $(document).click(function(e){ 
        //objeto clickeado
        var el = $(e.target), 
        //si el objeto que lo contiene tambien tiene la clase .no_cerrar
        padre = el.parents(".no_cerrar"), 
        //solo mostrar si hay resultados (un ejemplo)
        aparece = $("#search").val().length >= 2 ? true : false;
        
        result["slide" + (aparece && ($(e.target).hasClass("no_cerrar") || padre.length > 0) ? "Down" : "Up")](); 
    });
 
});
</script>
 
<style>
.b { height:26px}
ul {margin:0;padding:0}
.b, #result {width:200px; border:1px solid #000;}
#result {background:black; color:#fff; display:none}
li {width:100%; line-height:26px; text-align:center; border-top:1px solid #666}
input {width:100%; height:100%}
</style>
<body>
<b>test </b> <span>test objeto</span>
<div class="b"><input type="text" id="search" placeholder="Escribe 2 letras" class="no_cerrar" /></div>
<ul id="result" class="no_cerrar">
    <li>Result 1</li>
    <li>Result 2</li>
    <li>Result 3</li>
</ul>
</body>
</html>