Toggle 4 níveis jquery - para ninjas

Eragon · Setembro 23, 2013

Galera, seguinte

Preciso criar linha que ficam ocultas ou não através de [ + ] e [ - ]

Estou tendo muito trabalho

Basicamente eu tenho cada div com marcadores

a div que vai ficar oculta abaixo dessa é

<div data-id-p="2" data-id-pai="1">Essa é a div 2 filha da div 1</div>

e segue lógica

<div data-id-p="3" data-id-pai="2">Essa é a div 3 filha da div 2</div>

Ou seja marcação é simples, eu posso ter 4 níveis de div filha e pai, aqui é que está o problema.

Minha marcação HTML está assim

<div class="div_p" id="div_567" data-id-pai="" data-id-p="567" style="border-top: 1px solid #d5d5d5;" >
567<b style="font-weight: normal" data-id-p="567" class="toggle_expandir pointer">[ - ]</b>
</div>

<br />                
        
<div data-id-pai="567" data-id-p="599 class="div_p" id="div_599" style="border-top: 1px dotted #999;padding-left: 30px;">
599<b style="font-weight: normal" data-id-p="599" class="toggle_expandir pointer">[ - ]</b>
</div>


<br />

<div data-id-pai="567" data-id-p="600" class="div_p" id="div_600" style="border-top: 1px dotted #999;padding-left: 30px;">
600<b style="font-weight: normal" data-id-p="600" class="toggle_expandir pointer">[ - ]</b>
</div>


<br />

<div data-id-pai="600" data-id-p="601" class="div_p" id="div_601" style="border-top: 1px dotted #999;padding-left: 60px; ">
601<b style="font-weight: normal" data-id-p="601" class="toggle_expandir pointer">[ - ]</b>
</div>


<br />

<div data-id-pai="601" data-id-p="602" class="div_p" id="div_602" style="border-top: 1px dotted #999;padding-left: 90px;">
602<b style="font-weight: normal" data-id-p="602" class="toggle_expandir pointer">[ - ]</b>
</div>


<br />

<div class="div_p" id="div_603" data-id-pai="" data-id-p="603" style="border-top: 1px solid #d5d5d5;" >
603<b style="font-weight: normal" data-id-p="567" class="toggle_expandir pointer">[ - ]</b>
</div>


<br />

<div data-id-pai="603" data-id-p="604" class="div_p" id="div_604" style="border-top: 1px dotted #999;padding-left: 30px;">
604<b style="font-weight: normal" data-id-p="604" class="toggle_expandir pointer">[ - ]</b>
</div>

Eu criei um js com jquery mais está horrível, deve haver uma forma simples de faezr, mas nao consigo. podem me ajudar?

segue js e abaixo link

$(document).ready(function() {
  
    $('.toggle_expandir').live('click', function() {
	  
	  if($(this).text() == '[ + ]') $(this).html('[ - ]');
	  else $(this).html('[ + ]');
	  
	  //nivel 1
	  var id_p = $(this).attr('data-id-p');

	  $('div[data-id-pai='+id_p+']').each(function(i){
	 
			if($(this).is(":visible")) {
				$(this).hide(); 
				var pai_status = 0;
			}else { var pai_status = 1; $(this).show(); }
			
			
			var filho = $(this).attr('data-id-p');
			
			$('div[data-id-pai='+filho+']').each(function(z){
				
				if(($(this).is(":visible") || pai_status == 0)) {
					$(this).hide();
					var filho_status = 0;
				}else { var filho_status = 1; $(this).show();}
				
				var neto = $(this).attr('data-id-p');
				
				$('div[data-id-pai='+neto+']').each(function(w){
				
					if($(this).is(":visible") || filho_status == 0 || pai_status == 0) {
						$(this).hide();
						var neto_status = 0;
					}else { var neto_status = 1; $(this).show(); }
				
				});
			});
		});
	  
	  });
	});

Para ver rodando, segue link

http://jsfiddle.net/SB5wh/

William Bruno · Setembro 23, 2013

hum..

cara, se vc melhorar esse html, fica bem mais simples.

A div que vai abrir, deve ser filha da div que está disparando a abertura. Assim vc só precisa sempre procurar o filho direto e mostrar ele.

Sem necessidade de fazer esses data-*.

Posta uma imagem de como é o layout pra eu dar uma olhada.

Eragon · Setembro 23, 2013

Pois é ainda tem layout, problema é que eu tenho muitas intervenções ajax e o css tb está pronto dessa forma. tratando como linha. ajax se baseia.

Depois eu vou poder mover essas divs para baixo e para cima por isso preciso do data

pelo atributo eu nao consigo? $(this).attr('data-id-p');

Consegui uma pequena evolução.

Alguém pode dizer como trocar o [ + ] para [ - ] automaticamente? sem eu precisar ter que rodar um each e checar o visibility de cada div?

$('.toggle_expandir').live('click', function() {
	  
		//id do + para descobrir os filhos
		var id_p = $(this).attr('data-id-p');
		
		$('div[data-id-pai="'+id_p+'"]').slideToggle('fast', function() {
		  
		  		var id_p2 = $(this).attr('data-id-p');
		  		
		  		$('div[data-id-pai="'+id_p2+'"]').slideToggle('fast');
	
		});

     
  });

angelorubin · Setembro 23, 2013

Olá,

Pode ser com jQuery UI?

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI - Menu 4 Níveis</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
	$(function() {
		$("#nivel1,#nivel2,#nivel3,#nivel4").accordion({
			collapsible: true,
			heightStyle: "content",
			active: false
		});
	});
</script>
</head>
<body>
    <h2>Menu 4 Níveis</h2>
	<div id="nivel1">
		<h3>Nível 1</h3>
		<div id="nivel2">    	
        	<h3>Nível 2</h3>
           	<div id="nivel3">    	
        		<h3>Nível 3</h3>
                <div id="nivel4">    	
        			<h3>Nível 4</h3> 
        		</div>
        	</div>
        </div>
	</div>
</body>
</html>

Espero que ajude.

Eragon · Setembro 24, 2013

Angelo, bem legal esse exemplo.

Porém emsmo que eu organizasse o html dessa forma como eu informo ao jquery ui que apenas as div da .classe vao participar do efeito?

<h1>expandir</h1>

dddddd mais divs etc..

<div>

dddddd mais divs etc..

<div>

dddddd mais divs etc..

</div>

<div>

olha só esse exemplo que postei já está bem funcional

http://jsfiddle.net/2uSGD/

O único problema é que quando eu fecho o último grupo e depois fecho o primeiro ele se perde. pois o togle alterna entre os estados hidden/show. Teria uma forma de dizer que quando o togle pai estiver fechado tudo se fecha?

<div class="div_p" id="div_567" data-id-pai="" data-id-p="567" style="border-top: 1px solid #d5d5d5;" >
	567<b style="font-weight: normal" data-id-p="567" class="toggle_expandir pointer">[ - ]</b>
</div>

<br />			         			        
			         
<div data-id-pai="567" data-id-p="599" class="div_p" id="div_599" style="border-top: 1px dotted #999;padding-left: 30px;">
	599<b style="font-weight: normal" data-id-p="599" class="toggle_expandir pointer">[ - ]</b>
</div>


<br />	

<div data-id-pai="567" data-id-p="600" class="div_p" id="div_600" style="border-top: 1px dotted #999;padding-left: 30px;">
	600<b style="font-weight: normal" data-id-p="600" class="toggle_expandir pointer">[ - ]</b>
</div>


<br />	

<div data-id-pai="600" data-id-p="601" class="div_p" id="div_601" style="border-top: 1px dotted #999;padding-left: 60px; ">
	601<b style="font-weight: normal" data-id-p="601" class="toggle_expandir pointer">[ - ]</b>
</div>


<br />	

<div data-id-pai="601" data-id-p="602" class="div_p" id="div_602" style="border-top: 1px dotted #999;padding-left: 90px;">
	602<b style="font-weight: normal" data-id-p="602" class="toggle_expandir pointer">[ - ]</b>
</div>


<br />	

<div class="div_p" id="div_603" data-id-pai="" data-id-p="603" style="border-top: 1px solid #d5d5d5;" >
	603<b style="font-weight: normal" data-id-p="603" class="toggle_expandir pointer">[ - ]</b>
</div>


<br />	

<div data-id-pai="603" data-id-p="604" class="div_p" id="div_604" style="border-top: 1px dotted #999;padding-left: 30px;">
	604<b style="font-weight: normal" data-id-p="604" class="toggle_expandir pointer">[ - ]</b>
</div>

<script>

$(document).ready(function() {
  
   $('.toggle_expandir').live('click', function() {
	  
		//id do + para descobrir os filhos
		var id_p = $(this).attr('data-id-p');
		
		$('div[data-id-pai="'+id_p+'"]').slideToggle('fast', function() {
		  
		  		var id_p2 = $(this).attr('data-id-p');
		  		
		  		$('div[data-id-pai="'+id_p2+'"]').slideToggle('fast', function() {
		  			
		  			var id_p3 = $(this).attr('data-id-p');
		  			
		  			$('div[data-id-pai="'+id_p3+'"]').slideToggle('fast');
		  		
		  		});
	
		});

     
  });


     
  });

	  
</script>

angelorubin · Setembro 27, 2013

Olá,

Você teria que separar cada coisa.

Se você conseguisse postar isso:

"Posta uma imagem de como é o layout pra eu dar uma olhada."

Ajudaria muito.

Conseguiu resolver?

Entrar

Arquivado

Toggle 4 níveis jquery - para ninjas

Recommended Posts

Eragon 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eragon 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eragon 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Não consigo carregar imagem do captcha no meu formulário

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante