Ir para conteúdo

Arquivado

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

Gabriel42

Pobleminha com código Jquery

Recommended Posts

Pessoal to com um pobleminha  com um código Jquery, declarei a função

mais não está dando certo

 

 

HTML 

<!DOCTYPE html>
<html>
	<head>
		<title>Menus Responsivos</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
		<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
		<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
	</head>
	<body>
		<header>
			<input type="checkbox" id="btn-menu">
			<label for="btn-menu"> <i class="fa fa-bars" aria-hidden="true"></i> </label>
			<nav class="menu">
				<ul>
					<li><a href="#">Home</i></a></li>
					<li><a href="#">Produtos <i class="fa fa-caret-down" aria-hidden="true"></i></a>
						<ul class="submenu">
							<li><a href="#">Hospedagem de Sites</i></a></li>
							<li><a href="#">Hospedagem Wordpress</i></a></li>
							<li><a href="#">Registro de Domínio</i></a></li>
							<li><a href="#">Servidor Dedicado</i></a></li>	
							<li><a href="#">E-mail Exchange</i></a></li>
						</ul>
					</li>
					<li><a href="#">Sobre <i class="fa fa-caret-down" aria-hidden="true"></i></a>
						<ul class="submenu">
							<li><a href="#">Sobre nós</i></a></li>
							<li><a href="#">Parceiros</i></a></li>
							<li><a href="#">Blog</i></a></li>
						</ul>
					</li>
					<li><a href="#">FAQS</a></li>
				</ul>
			</nav>
		</header>
		<!-- JQUERY -->
		<script>
			$(".submenu").click(function(){
				$(this).children("ul").slideToggle();
			})
		</script>
	</body>
</html>

 

O Jquery está bem no finalzinho mais não está dando certo

 

 

CSS 

/* RESET */

* {margin: 0; padding: 0; font-size: 100%; font-family: 'Open Sans', sans-serif; font-weight: normal; box-sizing: border-box; border: none; 
outline: none;}

body {background-color: #fff;}
img {max-width: 100%;}
ul {list-style: none;}
a {text-decoration: none;}


/* MENU */


header {height: 50px; background-color: #CE852A;}
header label {font-size: 2.2em; color: #fff; cursor: pointer; display: none;} #btn-menu {display: none;}
.menu ul {background-color: #CE852A; display: flex;}
.menu ul ul {display: none;}
.menu li {margin-left: 50px;}
.menu a {display: block; padding: 15px 20px; color: #fff; font-size: 1.1em;}
.menu a:hover {background: rgba(0,0,0,0.3);}
.menu i {margin-left: 3px;}

.menu ul ul li {margin-left: 0px;}
.menu ul ul li a {padding: 15px 12px; font-size: 1.1em;}
.menu ul li:hover ul {display: block; position: absolute;} 


@media screen and (max-width: 768px) {
	header label {display: block; padding: 1px 8px;}
	.menu {position: absolute; width: 100%; transform: translateX(-100%); transition: all 0.3s;}
	.menu ul ul {width: 80%;}
	.menu ul {display: block; background: #555;}
	.menu ul li:hover ul {display: none; position: static;}
	.menu i {position: absolute; right: 2%;}
	.menu ul li {margin-left: 0px;}
	#btn-menu:checked ~ .menu {transform: translateX(0%);}

}



 

Compartilhar este post


Link para o post
Compartilhar em outros sites

parece que faltou colocar a chamada jQuery antes...

 

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

ja tentou passar a ul diretamente ou botar uma classe  e passar?

 

$("ul").slideToggle();

 

na verdade nunca usei isso aí mas talvez se usar uma biblioteca jquery mais recente como a que passei pode funfar também

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por juniormatrix
      Olá
       
      Achei esse script aqui no fórum mesmo:
       
      $.validator.addMethod( "customEmail", function (value, element) { return this.optional(element) || /^[\w-\.]+@fulano\.com\.br$/i.test(value); }, "Por favor, insira um e-mail válido com o domínio @fulano.com.br" ); $("#formulario").validate({ ignore: ".ignore", rules: { empresa: { required: true }, nome: { required: true }, contato: { required: true }, celular: { required: true }, email: { required: true, email: true, customEmail: true }, }, }); Testei e funcionou perfeitamente, mas gostaria que liberasse mais e-mails válidos, ao invés de apenas um.

      Tem como fazer? 
       
      Se alguém puder ajudar, fico muito grato.
    • Por ILR master
      Salve galera.
       
      Vou publicar um evento e quero colocar um Cronômetro regressivo que mostre em tempo real os dias, horas e minutos que faltam para determinada data, tipo:.
      Faltam 5 dias, 12:30:00 para inauguração.
       
      Qdo chegar no dia, quero que apenas apareça uma mensagem.
       
      Alguém pode me ajudar?
    • Por gersonab
      bom dia
      tenho uma aplicação onde gero um arquivo em pdf, gostaria de recuperar a url do pdf q foi criado, pois quando este é criado ele abre automaticamente e ou ja faz o download do mesmo, preciso da url para enviar para outros.
      <button type="button" class="btn btn-outline-primary" onclick="createPDF();">Imprimir</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script> <script language="javascript"> (function($){ $.fn.createPdf = function(parametros) { var config = { 'fileName':'html-to-pdf' }; if (parametros){ $.extend(config, parametros); } var orig = $(this); var widthOrig = $(orig).width(); $(orig).width(900); var quotes = document.getElementById($(orig).attr('id')); html2canvas(quotes, { onrendered: function(canvas) { var pdf = new jsPDF('p', 'pt', 'letter'); for (var i = 0; i <= quotes.clientHeight/900; i++) { var srcImg = canvas; var sX = 0; var sY = 900*i; var sWidth = 900; var sHeight = 900; var dX = 0; var dY = 0; var dWidth = 900; var dHeight = 900; window.onePageCanvas = document.createElement("canvas"); onePageCanvas.setAttribute('width', 900); onePageCanvas.setAttribute('height', 900); var ctx = onePageCanvas.getContext('2d'); ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight); var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0); var width = onePageCanvas.width; var height = onePageCanvas.clientHeight; if (i > 0) { pdf.addPage(612, 791); } pdf.setPage(i+1); pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62)); // Retirar o comentário caso queira ver como está sendo gerado o canvas. //document.body.appendChild(onePageCanvas); } pdf.save(config.fileName); $(orig).width(widthOrig); } }); }; })(jQuery); function createPDF() { $('#renderPDF').createPdf({ 'fileName' : '<?php echo $usercli['idocl']; ?>' }); }  
    • Por gersonab
      Boa tarde a todos.
      tenho pesquisado e ainda não encontrei uma forma de montar uma imagem online, tipo, tenho uma área de 400px por 400px , nesta gostaria de acrescentar algumas imagens que já tenho, tipo clicar e arrastar para dentro, sendo que estas imagens já se encontram online no site, seria mais ou menos assim : poderia colocar dentro desta área uma imagem do gato , do cachorro e ou outra. Não sei qual biblioteca ou forma de fazer.
      gostaria da ajuda para iniciar, desde já agradeço.
×

Informação importante

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