JQuery - Boton de ocultar todo

   
Vista:

Boton de ocultar todo

Publicado por Martin (3 intervenciones) el 31/07/2015 21:38:34
Hola, mi consulta es simple para alguien que sabe jQuery como ustedes, yo solo programo en PHP y me tope con un treeview hecho con CSS y animado con jQuery, el único problema es que no se hacer un botón de MOSTRAR TODO o OCULTAR TODO, solo tengo el de CAMBIAR VISTA, lo que hace es muestra lo que está oculto y oculta lo que está a la vista… yo deseo que se expanda todo o se oculte todo.
Me podrían ayudar hacer ese botón?

Ejecmplo: http://n9000241.ferozo.com/tree/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pure CSS Tree</title>
 
    <link href="tree.css" type="text/css" rel="stylesheet" />
		<script src="jquery-1.11.3.min.js" type="text/javascript" > </script>
	<script type="text/javascript">
 
		$( document ).ready( function( ) {
				$( '.tree li' ).each( function() {
						if( $( this ).children( 'ul' ).length > 0 ) {
								$( this ).addClass( 'parent' );
						}
				});
 
				$( '.tree li.parent > a' ).click( function( ) {
						$( this ).parent().toggleClass( 'active' );
						$( this ).parent().children( 'ul' ).slideToggle( 'fast' );
				});
 				$( '#all' ).click( function() {
 
					$( '.tree li' ).each( function() {
						$( this ).toggleClass( 'active' );
						$( this ).children( 'ul' ).slideToggle( 'fast' );
					});
				});
 
		});
 
	</script>
</head>
<body>
    <div class="content">
	<button id="all">CAMBIAR VISTA</button>
        <ul class="tree">
            <li><a>Parent 1</a></li>
            <li><a>Parent 2</a></li>
            <li>
                <a>Parent 3</a>
                <ul>
                    <li>
                        <a>1st Child of 3</a>
                        <ul>
                            <li><a>1st grandchild</a></li>
                            <li><a>2nd grandchild</a></li>
                        </ul>
                    </li>
                    <li><a>2nd Child of 3</a></li>
                    <li><a>3rd Child of 3</a></li>
                </ul>
            </li>
            <li>
                <a>Parent 4</a>
                <ul><li><a>Parent 4's only child</a></li></ul>
            </li>
        </ul>
    </div>
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Boton de ocultar todo

Publicado por xve (557 intervenciones) el 01/08/2015 15:19:29
Hola Martin, aqui te adjunto el código modificado, haber si es esto lo que quieres...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pure CSS Tree</title>
 
    <link href="tree.css" type="text/css" rel="stylesheet" />
	<script src="jquery-1.11.3.min.js" type="text/javascript" > </script>
	<script type="text/javascript">
 		$( document ).ready( function( ) {
			$( '.tree li' ).each( function() {
				if( $( this ).children( 'ul' ).length > 0 ) {
					$( this ).addClass( 'parent' );
				}
			});
 
			$( '.tree li.parent > a' ).click( function( ) {
				$( this ).parent().toggleClass( 'active' );
				$( this ).parent().children( 'ul' ).slideToggle( 'fast' );
			});
			$( '#all' ).click( function() {
				$( '.tree li' ).each( function() {
					$( this ).toggleClass( 'active' );
					$( this ).children( 'ul' ).slideToggle( 'fast' );
				});
			});
			$("#esconder").click(function(){
				if($(".tree").is(":visible"))
					$(".tree").hide();
				else
					$(".tree").show();
			});
		});
	</script>
</head>
<body>
    <div class="content">
	<button id="all">CAMBIAR VISTA</button>
	<button id="esconder">Esconder/Mostrar</button>
        <ul class="tree">
            <li><a>Parent 1</a></li>
            <li><a>Parent 2</a></li>
            <li>
                <a>Parent 3</a>
                <ul>
                    <li>
                        <a>1st Child of 3</a>
                        <ul>
                            <li><a>1st grandchild</a></li>
                            <li><a>2nd grandchild</a></li>
                        </ul>
                    </li>
                    <li><a>2nd Child of 3</a></li>
                    <li><a>3rd Child of 3</a></li>
                </ul>
            </li>
            <li>
                <a>Parent 4</a>
                <ul><li><a>Parent 4's only child</a></li></ul>
            </li>
        </ul>
    </div>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Boton de ocultar todo

Publicado por Martin (3 intervenciones) el 01/08/2015 17:56:52
Gracias xve... no es el efecto que buscaba, pero me ayudo a entender algo... yo quiero que se cierre el arbol y quede solo el "parent".
Estuve leyendo algo de jQuery y veo que todo esta en estas lineas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$( '.tree li' ).each( function() {
				if( $( this ).children( 'ul' ).length > 0 ) {
					$( this ).addClass( 'parent' );//esto marca los item del raiz con una clase parent, no?
				}
			});
 
			$( '.tree li.parent > a' ).click( function( ) { //aca lo cambia a active?
				$( this ).parent().toggleClass( 'active' );
				$( this ).parent().children( 'ul' ).slideToggle( 'fast' );
			});
 
 
			$( '#all' ).click( function() { //  esta es la accion del boton, aca es donde quiero que oculte todo menos el parent
			// como esta ahora me muestra los ocultos y me oculta los que se ven	
                                        $( '.tree li' ).each( function() {
					$( this ).toggleClass( 'active' ); //pasa a una clase llamada active? o se activa? o que?
					$( this ).children( 'ul' ).slideToggle( 'fast' );
				});
			});
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Boton de ocultar todo

Publicado por Vainas (96 intervenciones) el 02/08/2015 11:33:55
Buenas:

Perdon por el anterior post pero me he dejado llevar por una solucion rapida... Tiene un pequeño problema y es que slideToggle si esta oculto muestra y si esta visible oculta asi que puede que tenga un efecto un tanto extraño si tienes algunas ramas del arbol abiertas y otras cerradas por ejemplo. La cosa esta en usar slideDown slideUp removeClass y addClass que ejecutan el slideToggle y toggleClass de forma separada para que puedas tener control sobre las mismas. Se me ha ocurrido que se puede colocar como una variable (una clase) dentro del boton para poder saber cuando hay que mostrar y cuando ocultar todo:

Yo creo que podria quedar algo asi (igual he podido confundirme un poco):

1
2
3
4
5
6
7
8
9
10
11
$( '#tu_nuevo_boton' ).click( function( ) {
		if ($(this).hasClass( "activo" )){
		$( '.tree li.parent' ).removeClass('active');
		$( '.tree li.parent' ).children( 'ul' ).slideUp('fast');
		$(this).removeClass('activo');
		}else{
		$( '.tree li.parent' ).addClass('active');
		$( '.tree li.parent' ).children( 'ul' ).slideDown('fast');
		$(this).addClass('activo');
		}
});


Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Boton de ocultar todo

Publicado por Vainas (96 intervenciones) el 01/08/2015 22:38:33
Buenas:

Creo que con solo llamar al click de todos los links lo puedes lograr. Seria algo asi:

1
2
3
4
5
<button id="tu_nuevo_boton">Mostrar/Ocultar</button>
.... En tu script:
$( '#tu_nuevo_boton' ).click( function() {
   $( '.tree li.parent > a' ).click();
});


Solamente es lanzar algo que ya has creado antes. Ejecutas todos los onlicks de los elementos a.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Boton de ocultar todo

Publicado por Martin (3 intervenciones) el 03/08/2015 16:01:34
Muchas Gracias Vainas! el ejemplo de llamar a los click de todos los links causaria el mismo efecto de mostrar a los cerrados y ocultar los abiertos, el más lógico es el que me pasaste con la variable (creo que usas el nombre de la clase como variable)... comencé a leer un cursito de jQuery online, para entender pero me iba a tardar mucho para llegar a comprenderlo y poder corregirlo. MUCHAS GRACIAS!

Ese ejemplo lo probe y funciona perfecto, ahora le agarre el gustito al jQuery y quiero aprender mas.. de vuelta MUCHAS GRACIAS y SOLUCIONADO el tema!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Boton de ocultar todo

Publicado por Vainas (96 intervenciones) el 06/08/2015 20:28:47
Buenas:

La variable es una variable digamos que camuflada dentro del html del boton. Es decir meto dentro del boton una clase "x" para luego ver si existe o no y entonces realizar la fucnionalidad.

jQuery no es que le tengas que agarrar el gustito es que tienes que ir probando y te engancharas cada vez mas jaja.

Yo lo uso poco la verdad (validaciones, algun efecto y envios por ajax) pero se le puede sacar bastante partido. Animo!!!

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar