Saber que funcion de toggle se va a ejecutar (jquery)

Tifany · #1 (**permalink**) 29/06/2010, 09:43

Ultimamente me estoy aficionando a usar jquery pero se me presenta un problema que no sé como resolver, a ver si consigo explicarme bien.

Tengo un evento toggle que abre y cierra un div oculto cada vez que haces click en un enlace, es algo asi:

Código PHP:

  $('#id').toggle(function(){

      $('#id2').slideDown('fast');

},function(){

      $('#id2').slideUp('fast');

});

Hasta ahí bien, el problema es que quiero que cuando hagas click en cualquier otra parte de la web, si el div esta abierto se cierre, pero claro... sólo si esta abierto, ¿cómo podría hacer esto?

salu2

Dany_s · #2 (**permalink**) 29/06/2010, 15:16

Código Javascript:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $( function (){
 
        $('#id').click( function(){
            $('#id2').slideToggle('fast');
        });
 
        $(document.body).click( function (evt){
            if ( $("#id2").is(":visible") && evt.target.id != "id")
                $('#id2').slideUp('fast');
        });
 
    });
</script>
    <style>
        #id2{height:30px; width:250px; background:red;}
    </style>
  </head>
<body>
 
    <button id="id">Toggle</button>
    <div id="id2"></div>
 
</body>
</html>

Tifany · #3 (**permalink**) 30/06/2010, 09:43

Muchas gracias por tu respuesta, lo probaré. Hay que ver lo que me queda por aprender... esto no acaba nunca jaja

Tifany · #4 (**permalink**) 08/07/2010, 12:46

pues... no funciona el código que me has puesto, el div abre y cierra cuando pulsas en el link/boton pero cuando pulsas en el body no se cierra.

agradeceria que alguien me ayudase porque sigo sin conseguirlo.

Dany_s · #5 (**permalink**) 08/07/2010, 15:28

seguro que probas haciando clic en la parte de abajo del div que firefox no lo toma pero hacelo seleccionando "document" en vez de "document.body"

a mi me funciona

Código Javascript:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $( function (){
 
        $('#id').click( function(){
            $('#id2').slideToggle('fast');
        });
 
        $(document).click( function (evt){
            if ( $("#id2").is(":visible") && evt.target.id != "id")
                $('#id2').slideUp('fast');
        });
 
    });
</script>
    <style>
        body{background-color:blue}
        #id2{height:30px; width:250px; background:red;}
    </style>
  </head>
<body>
 
    <button id="id">Toggle</button>
    <div id="id2"></div>
 
</body>
</html>