jquery com clique

pocoloco · Fevereiro 19, 2013

Olá pessoal!

Eu sou newbie em Jquery, baixei algumas apostilas na net, mas to apanhando!

É o seguinte:

fiz um menu dropdown apenas com css, mas queria implementar alguns diferenciais como:

abrir o submenu clicando no menu e sumir com o submenu ao clicar em um item ou em outro menu ou no proprio menu em questão.

Tentei varios exemplos na net mas não consegui adaptar para funcionar.

Será que alguém poderia fazer a gentileza de me mostrar o caminho das pedras?

Não quero o peixe, apenas aprender a pescar!

Valeu.

Minha pagina:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">*{ margin:0px; padding:0px;}/*menu de cima*/#menupai{ top:0px; width:100%; background-color:#03C; height:40px; line-height:40px;}ul#menufilho{ width:800px; margin:0 auto; list-style-type:none;font:16px "Trebuchet MS", Arial, Helvetica, sans-serif;}ul#menufilho li{float:left; }ul#menufilho li a{display:block; padding:0 15px; height:40px;position:relative;					line-height:40px; color:#fff; text-decoration:none; 					background-color:#03C;}ul#menufilho li a:hover{background-color:#009;}ul#menufilho li div{ display:none; position:absolute; top:40px; font-size:12px;					 margin:auto; padding:5px; background-color:#009; color:#FFF;}					 		ul#menufilho li:hover div{display:block;}						</style></head><body><div id="menupai">	<ul id="menufilho">		<li><a href="#">Inicio</a></li>		<li class="submenu"><a href="#">Usuário</a>			<div>				<table width="200">					<tr>						<td>texto 01</td>					</tr>					<tr><td></td></tr>					<tr>												<td>texto 02</td>					</tr>				</table>			</div>		</li>		<li><a href="#">Configurações</a></li>	</ul></div></body></html>

nossa que maravilha de forum.... Frequentado por quem entende...huahauhauhauhauhauh!

William Bruno · Fevereiro 19, 2013

oi @pocoloco,

infelizmente não tive tempo de ler esse seu tópico antes desse seu post infeliz.

Enfim, vamos lá:

abrir o submenu clicando no menu

assim como o teu :hover do css,

no evento onclick do item de menu, sete display: block para o submenu correspondente.

sumir com o submenu ao clicar em um item

No click de qualquer item, suma com todos.

E então mostre o respectivo. Isso resolve.

"sumir com todos", significa: atribuir display: none em todos.

Qual a sua dúvida apartir daqui ?

pocoloco · Fevereiro 20, 2013

Pois é Willian, peço desculpas pela ironia :blush: é que dado ao tempo da postagem fiquei um pouco irritado!

Alias eu nem sabia que voce participava deste forum!

Creio que este é seu blog http://wbruno.com.br

Bom mesmo que nao seja... eu estive verificando este artigo:

http://wbruno.com.br/2011/10/26/menu-dropdown-abrindo-click-fechando-ao-clicar-fora/

e achei muito bacana, quase o que eu estava querendo. :)

Tenho uma dúvida!

o que devo trocar e mexer para que quando eu clicar no mesmo menu ou um item do submenu que apareceu.

O submenu possa novamente desaparecer (recolher)?

William Bruno · Fevereiro 20, 2013

@pocoloco, sim esse é o meu blog mesmo :lol:

segue o código com a modificação que vc pediu:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function( $ ){
	var $uls = $('#menu ul');
	$uls.hide();

	$('#menu > li').click(function( e ){
		e.stopPropagation();

		var $ul = $( this ).find('ul');

		if( $ul.is(':visible')==true ){
			$ul.hide();
		} else {
			$uls.hide();
			$ul.show();
		}
	});
	$('#menu ul').click(function( e ){
		e.stopPropagation();
	});
	$('body').click(function(){
		$uls.hide();
	});
});
</script>
<style type="text/css">
* { list-style: none; }
html, body { height: 100%; }
body { font: 12px/12px Tahoma, sans-serif; color: #666; }
#main { min-height: 100%; }
#menu { height: 30px; }
#menu li {
	position: relative;
	float: left;
	padding: 0 10px;
	height: 30px;
	line-height: 30px;
	border: 1px solid #666;
}
#menu ul {
	position: absolute;
	top: 30px;
	left: -1px;
	border: 1px solid #666;
	background: #fff;
}
#menu li li {
	width: 200px;
	border: none;
}
</style>
</head>
<body>
<div id="main">
	<ul id="menu">
		<li>Abrir sub 1
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
				<li>Item 4</li>
			</ul>
		</li>
		<li>Abrir sub 2
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
			</ul>
		</li>	
	</ul><!-- /menu -->
</div><!-- /main -->
</body>
</html>

pocoloco · Fevereiro 20, 2013

Nossa que falta de atenção minha, é claro que é seu site o endereço esta no final do seu comentario! hehe :yes:

Entao W.Bruno era quase isso apenas que quando clicar em um item do submenu o submenu tb deveria recolher!

Não querendo abusar da sua pessoa, mas será que poderia me explicar o código?

só a parte do Jquery, que é parecido porem muito diferente do javascript.

O que significam os $ ?

como pode ser verificado o id menu maior que o elemento li?

('#menu > li')

vixxi.... vc teria alguma apostila bem basica explicando passo a passo o escopo e sintaxe do jquery

Pq. sem entender a linguagem, fica dificil compreender né?

William Bruno · Fevereiro 20, 2013

não tenho uma apostila passo a passo não, mas posso tentar improvisar.

jQuery(document).ready(function( $ ){

Essa linha acima, espera o DOM carregar.

Então, assim que o html estiver pronto, oque estiver ali dentro será executado.

Usamos isso, pois não conseguimos agir com js em um elemento que ainda não existe na marcação html.

Por exemplo, o seguinte vai dar erro:

<script>alert( document.getElementById('t').innerHTML );</script>
<div id="t">conteudo</div>

mas o seguinte funciona:

<div id="t">conteudo</div>
<script>alert( document.getElementById('t').innerHTML );</script>

não sei qual o seu nível de javascript, mas é oq fazemos com o:

window.onload = function(){
    alert( document.getElementById('t').innerHTML );
}

só que o window.onload espera tudo carregar, html, css, imagens, js...

e o document.ready espera só o html, então ele acontece antes.

var $uls = $('#menu ul');

Nesta linha acima, guardo na variavel $uls, o retorno disso ai.

o jQuery assim como outras libs javascript, trabalham com a função $().

Essa função dentre outras coisas, seleciona elementos no dom.

no caso, é um atalho para:

document.getElementById('menu').getElementsByTagName('ul');

entendeu ?

só que o $() trabalha com seletores css, por isso é tão fácil achar elementos com jQuery.

$uls.hide();

aqui eu escondi todas as ULs.

o mesmo que o .style.display = 'none';

Note que $uls, são varias ULs(todos os submenus), e o jQuery faz o loop por baixo dos panos.

$('#menu > li').click(function( e ){

novamente isso é um seletor css.

#menu > li, significa: apenas os LIs filhos diretos de #menu.

Logo, não pega #menu li li.

var $ul = $( this ).find('ul');

apartir do LI clicado, eu pego o UL correspondente.

Então, só o submenu do item que foi clicado.

		if( $ul.is(':visible')==true ){
			$ul.hide();
		} else {
			$uls.hide();
			$ul.show();
		}

aqui eu verifico se o submenu atual está a mostra, se estiver eu escondo. Se não estiver, eu mostro.

	$('#menu ul').click(function( e ){
		e.stopPropagation();
	});

isso aqui é para evitar que ao clicar no submenu, o menu feche. Como vc quer isso, então remova esse trecho.

	$('body').click(function(){
		$uls.hide();
	});

aqui eu fecho todos os submenus ao clicar em qualquer lugar do body.

pocoloco · Fevereiro 20, 2013

vou olhar com calma e depois te falo, mas o sinal de $ ta me matando o entendimento pq ele é usado
na função, na declaração da variavel, na declaração do elemento do css.....

vou preparar o codigo e falar o que eu entendi, se entender algo errado e vc puder, me de um toque, blz?

Quanto ao meu nivel de javascript é básico.

o dom é o

http://code.jquery.com/jquery-1.9.1.min.js ?

William Bruno · Fevereiro 20, 2013

não cara, DOM é document object model.

é uma forma de lermos o html.

tipo,

<ul>
   <li></li>
</ul>

isso ai em cima, é "o dom". Entendeu ? a li dentro do ul. Essa "leitura"

isso aqui:

http://code.jquery.com/jquery-1.9.1.min.js

é o codigo fonte do jQuery.

o jQuery não é uma linguagem nova. É só uma biblioteca de funções escrita em javascript.(essa sim é a linguagem)

o $, é atalho para jQuery.

Vc poderia usar:

jQuery('#menu ul') no lugar de $('#menu ul'), sem problemas.

é só uma função, que vai no DOM selecionar os elementos. E esse select é feito com seletores css.

só isso.

pocoloco · Fevereiro 20, 2013

jQuery(document).ready(function( $ ){  /*declara que é um script do tipo jquery e verifica se o documento esta pronto ou lido e abre uma função*/
	var $uls = $('#menu ul');   /*declara a variavel uls declarando qualquer tag ul no documento que tenha atribuida o id menu*/
	$uls.hide();  /*manda esconder o conteudo da ul que tem id menu - o que vem depois da ul, que seria li ou outra ul de id diferente etc...*/

	$('#menu > li').click(function( e ){  /*todo o conteudo da li que vem logo após a ul de id menu e for clicada abre uma função de nome E*/
		e.stopPropagation(); /* ao clicar nesta li a função de nome E para qualquer ação*/  /*neste caso abre um link? ou para tudo?*/

		var $ul = $( this ).find('ul'); /*declara a variavel ul sendo a mesma ul que esta sendo clicada, procurar outra tags ul?*/ /*???????*/

		if( $ul.is(':visible')==true ){  /*se a ul for visivel ou seja estiver aberta*/ /*aqui é a ul mesmo ou conteudo dentro dela tipo o li ?*/
			$ul.hide(); /* esconde o conteudo dentro da ul que seria a li etc...*/
		} else { /*caso contrario*/
			$uls.hide(); /*esconde o conteudo dentro da tag ul com id menu*/
			$ul.show(); /*mostra o conteudo dentro da ul sem o id menu*/
		}
	});
	$('#menu ul').click(function( e ){ /*se clicar na ul de id menu, abre a função tb de nome E*/ /* - pode repetir o nome da função? */
		e.stopPropagation(); /* ao clicar na ul de id menu a função de nome E para qualquer ação */ /* mas se para a ação não deveria nem fechar o submenu né? */
	});
	$('body').click(function(){ /* se clicar no corpo da pagina abre uma função sem nome*/
		$uls.hide(); /* a função sem nome manda esconder todo o conteudo dentro da tag ul de id menu*/
	});
});

Acho que quase entendi ou não é nada disso?

entao o Dom é simplesmente a leitura do documento de cima para baixo e da esquerda para a direita, a sequencia de identificação do documento e suas tags ou scripts?

No caso do $ nesta parte:

jQuery(document).ready(function( $ ){

ficaria

jQuery(document).ready(function( jQuery ){

e nesta parte:

var $uls = $('#menu ul');

ficaria

var jQueryuls = jQuery('#menu ul');

tanto faz é isso?

William Bruno · Fevereiro 20, 2013

vixi cara.. não mano.. ta tudo confuso.. vc não entendeu não.

DOM é básico(não se preocupe), e $ é simples.

Você sabe escrever o que vc precisa em js puro ?(o mesmo comportamento q fiz em jQuery?)

pocoloco · Fevereiro 21, 2013

é que hoje todos estao trabalhando com o jquery e eu queria realmente aprender isso, mas não esquenta, acheia umas video aulas no youtube e vou dar uma conferida qquer coisa volto a chamar ou te mando uma mp se for o caso! :rolleyes:

Obrigado pelo seu tempo e atenção! :clap:

Tatiana Tafur · Julho 3, 2013

Puxa,eu li esse tópico inteiro pra tirar uma dúvida e acho que se não fosse por algumas perguntas básicas feita pelo pocoloco eu não teria entendido tão bem. Ainda estou iniciando meu conhecimento em Jquery e sei bem pouco (quase nada, na real) de Javascript.

Só queria agradecer pela explicação e pelo código demo, que vi funcionando. rsrs.

^^

Arquivado

jquery com clique

Recommended Posts

pocoloco 1

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

pocoloco 1

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

pocoloco 1

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

pocoloco 1

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

pocoloco 1

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

pocoloco 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tatiana Tafur 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante