Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

AMON-HÁ

Generalizar uma função

Por , em Javascript

Recommended Posts

AMON-HÁ    0

AMON-HÁ
Postado

Queria generalizar uma função que eu fiz...

Pra falar a verdade nem sei se é assim a melhor forma de escrever essa função usando jquery, mas funciona...

 

Eis a função:

$(document).ready(function() {
  $('#menu ul').show();
  
  $('.fechar a').click(function() {
    $('#menu ul').toggle('fast');
    if($(this).html() == "[-]")
      $(this).html("[+]");
    else
      $(this).html("[-]");
  })
});

O que eu queria então é, deixar o código genérico, ou seja, esse ser usado sempre que eu colocar um novo sistema desse no site...

Já pessou eu ter uns 5 menus? não quero copiar e colar esse código 5 vezes, tendo que mudar apenas os nomes das classes ou ids...

 

Pra melhor entendimento:

<div id="menu">
  <div class="fechar"><a href="#">[-]</a></div>
  <ul>
    <li>item 1</li>
    <li>item 1</li>
  </ul>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

crie uma function fora do instanciamento do jQuery, e faça ela receber os parâmetros que você precisar.. como ids, classes..

 

mas esse teu código, só funciona para uma 'unica ul' de cada menu.. ne?!

se você tiver um menu com vários itens, ele não funciona muito bem.. pense mais em como usar os seletores .next() , e nessa estrutura, de DIVs.. fazer apenas com UL LI encaixados seria mais prático.

Compartilhar este post

Link para o post
Compartilhar em outros sites

AMON-HÁ    0

AMON-HÁ
Postado

crie uma function fora do instanciamento do jQuery, e faça ela receber os parâmetros que você precisar.. como ids, classes..

 

mas esse teu código, só funciona para uma 'unica ul' de cada menu.. ne?!

se você tiver um menu com vários itens, ele não funciona muito bem.. pense mais em como usar os seletores .next() , e nessa estrutura, de DIVs.. fazer apenas com UL LI encaixados seria mais prático.

 

Amigo, primeiramente obrigado pela atenção...

Mas gostaria de pedir pra que me ajudasse a fazer esse código...

 

Vamos imaginar o seguinte:

 

Numa primeira situação:

<div id="menu">
  <div class="fechar"><a href="#">[-]</a></div>
  <ul id="menu1">
    <li>item 1</li>
    <li>item 1</li>
  </ul>
  <div class="fechar"><a href="#">[-]</a></div>
  <ul id="menu2">
    <li>item 1</li>
    <li>item 1</li>
  </ul>
  <div class="fechar"><a href="#">[-]</a></div>
  <ul id="menu3">
    <li>item 1</li>
    <li>item 1</li>
  </ul>
</div>
Numa segunda situação:

<div id="camada">
  <div class="fechar"><a href="#">[-]</a></div>
  <ul id="camada1">
    <li>item 1</li>
    <li>item 1</li>
  </ul>
</div>
Resumindo, o código terá que funcionar para qualquer situação que tenha um <div class="fechar"><a href="#">[-]</a></div> como link de chamada e tenha <ul id="nome_lista"></ul> como a lista a ser fechada...

 

Então vamos ao código...

 

Já sabemos que para ativar a função eu precisarei da seguinte rotina:

$(document).ready(function() {
  $(identificacao_ul).show();
  
  $(identificacao_link).click(function() { // esse é padrão, no caso, '.fechar a'
    $(identificacao_ul).toggle('fast');
    if($(this).html() == "[-]")
      $(this).html("[+]");
    else
      $(this).html("[-]");
  })
});
Então eu construir uma função em javascript como você sugeriu...

function AbrirFechar(identificacao_ul) {
$(document).ready(function() {
  $(identificacao_ul).show();
  
  $('.fechar a').click(function() { // esse é padrão, pode deixar esta classe mesmo
    $(identificacao_ul).toggle('fast');
    if($(this).html() == "[-]")
      $(this).html("[+]");
    else
      $(this).html("[-]");
  })
});
}
Só que assim não funciona legal...

O bom seria, se tivesse como passar os parâmetros por jquery mesmo...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Exemplo:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	fechar( '' );//fechando todos
	$(".fechar a").click(function( e ){
		e.preventDefault();
		
		var ul = $(this).parent('li').parent('ul').attr('id');
		
		fechar( '#'+ul );//fechando todos do elemento pai corrente
		
		
		$( this ).next('ul').show( 'fast' );
		$( this ).html( '[-]' );
	});
});

function fechar( father )
{
	$( father+" .fechar ul" ).hide( 'fast' );//fechando todos
	$( father+" .fechar a" ).html( '[+]' );
}
</script>
</head>
<body>

	<h1>Menu</h1>
	<ul id="menu">
		<li class="fechar"><a href="#">[-]</a>
			<ul>
				<li>item 1</li>
				<li>item 1</li>
			</ul>
		</li>
		<li class="fechar"><a href="#">[-]</a>
			<ul>
				<li>item 2</li>
				<li>item 2</li>
			</ul>
		</li>
		<li class="fechar"><a href="#">[-]</a>
			<ul>
				<li>item 3</li>
				<li>item 3</li>
			</ul>
		</li>
	</ul><!-- /menu -->

	<h1>Navegação</h1>
	<ul id="nav">
		<li class="fechar"><a href="#">[-]</a>
			<ul>
				<li>item 1</li>
				<li>item 1</li>
			</ul>
		</li>
		<li class="fechar"><a href="#">[-]</a>
			<ul>
				<li>item 2</li>
				<li>item 2</li>
			</ul>
		</li>
	</ul><!-- /nav -->
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

AMON-HÁ    0

AMON-HÁ
Postado

William Bruno,

 

No seu código está acontecendo o mesmo problema que estava acontecendo com o meu código...

Gravei um video bem pequeno pra você ver...

 

Veja, que quando tento fechar, ele fecha e abre...

 

E outra... dessa forma aí não é possível deixar alguns abertos e outros fechados, já que quando abre um os outros fecham

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Cara, isso é simples de se resolver.

 

Pense um pouco na lógica, eu não quis te entregar um código pronto. Mas um ponto de partida simples para você começar, sem precisar pegar um script em que não entenda como foi feito.

Compartilhar este post

Link para o post
Compartilhar em outros sites

AMON-HÁ    0

AMON-HÁ
Postado

Cara, isso é simples de se resolver.

 

Pense um pouco na lógica, eu não quis te entregar um código pronto. Mas um ponto de partida simples para você começar, sem precisar pegar um script em que não entenda como foi feito.

 

Não é questão de querer código pronto... mas é o fato de o código ter o mesmo problema que o meu... ou seja, cheguei com um problema, e tô saindo com ele, do mesmo jeito...

Mas tudo bem, muito obrigado... e valeu pela atenção...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Só para você ter idéia, bastava comentar essa linha: 

//fechar( '#'+ul );//fechando todos do elemento pai corrente
<script type="text/javascript">
$(document).ready(function(){
	fechar( '' );//fechando todos
	$(".fechar a").click(function( e ){
		e.preventDefault();
		
		var ul = $(this).parent('li').parent('ul').attr('id');
		
		//fechar( '#'+ul );//comentei essa linha
		
		
		$( this ).next('ul').toggle( 'fast' );
		$( this ).html( '[-]' );
	});
});

function fechar( father )
{
	$( father+" .fechar ul" ).hide( 'fast' );//fechando todos
	$( father+" .fechar a" ).html( '[+]' );
}
</script>
e funciona exatamente como você descreveu.

 

E para o efeito de trocar o + por - trocar:

$( this ).html( '[-]' );
por:
if( $( this ).html()=='[-]' )
			$( this ).html( '[+]' );
		else
			$( this ).html( '[-]' );

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito