How do the menus or classes appear gradually?

Question

How do the menus or classes appear gradually?

Navigation

#1 by (0 votes)

0

I would like a help, it is a project that would be a pizzeria site, where when the person entered the site did not appear all the "menus" or "classes" at a time, when you enter only the menu would appear, choose which pizzas the person would want to appear in the delivery part and so on. I also needed to calculate the value of each pizza automatically when the quantity was selected and the subtotal appeared in the footer. Thanks so much to anyone who can help.

    $('.irEntrega').click(function(){
    
    	$('.entrega').show();
    	$('.cardapio').hide();
    });
    
    
    
    $('.qtd').change(function () {
    	var total = 0;
        var clicado = $(this);
    	
    	
    	$('.qtd').each(function () {
    	var $cada_um = $(this);
    	var valor = Number($cada_um.parent().find('.valor').html());
    	var qtd = $cada_um.val();
    	total += valor * qtd;
    });
    
    	$('.final').html(total);
    
    });

    .etapa {
    	display: none;
    	}
    	
    .ativa {
    	display: block;
    }
    
    .pizza {
    	width: 25%;
    	float: left;
    	padding: 1%;
    }
    
    .qtd{
    	width: 30px;
    	height: 30px;
    }
    
    .pizza img{
    	width: 100%;
    }
    
    .painel_nav{
    	clear: both;
    }
    
    header{
    	background-image: url("../imgs/back.jpg");
    	height: 110px;
    }
    
    footer{
    	width: 100%;
    	position: fixed;
    	bottom: 0;
    	background-color: lightcoral;
    	font-size: 3em;
    	
    }

<!DOCTYPE html>
    <html lang ="pt-br">
    <head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    	<link href="css/geral.css" type="text/css" rel="stylesheet">
    	
    </head>
    <body>
    <div class="conteudo">
    	<div class="etapas cardapio">
    		<h3>Cardapio</h3>
    		
    		<div class="pizza">
    			<h4>nome pizza</h4>
    			<img src="http://placehold.it/350x150">Quantidade:<inputclass="qtd" type ="number" value="0" max="5" min="0"> nome pizza</input>
    		</div>
    			<div class="pizza">
    			<h4>nome pizza</h4>
    			<img src="http://placehold.it/350x150">Quantidade:<inputclass="qtd" type ="number" value="0" max="5" min="0"> nome pizza</input>
    		</div>
    		<! -- itens -->
    		<div class="painel_nav">
    			<button class="irEntrega">Avançar</button>
    		</div>
    	</div>
    	<div class="etapas entrega">
    		<h3>Entrega</h3>
    		<! -- formulario de entrega -->
    		     <form id="Endereco">
                  <label for="nome">Nome do Cliente:</label>
                      <input name="nome" id="nome" type="text"><br />
                  <label for="cpf">Rua:</label>
                      <input name="rua" id="rua" type="text"><br />
                  <label for="email">Complemento:</label>
                      <input name="complemento" id="complemento" type="text"><br />
                  <label for="senha">Bairro:</label>
                      <input name="bairro" id="bairro" type="text" /><br />
                  <label for="senha">CEP:</label>
                      <input name="cep" id="cep" type="number" max="10" min="0" /><br />
                      <br />
                      
    </form>
    		<div class="painel_nav">
    			<button class="irPagamento">Informação de Pagamento</button>
    		</div>
    	</div>
    	<div class="etapas pagamento">
    		<h3>Pagamento</h3>
    		<p>asdasdsadsasadsadsadsasasadsasasasasadsaa</p>
    		<! -- formulario de pagamento -->
    	</div>
    	<div class="etapas stiuacao">
    		<h3>Situação</h3>
    		<! -- mensagens bonitas de agradecimentos e CONTATO -->
    	</div>
    	<footer>
            valor: <span class="final">0,00</span>	    
    
    	</footer>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><scriptsrc="js/geral.js"></script>
    
    </body>
</html>

javascript html jquery css

asked by anonymous 21.10.2016 / 17:54

1 answer

function returning NaN failing to perform the calculation Run Laravel application on another computer

score 0 · Answer 1

Sorry for the delay, well what I saw is just leave the elements that should not appear with display: none and by what the person will clicking on your links will change them by display: block.

<html>
<head>
    <title>quadrados</title> 
    <style>
        div{
            width:100px;
            height: 100px;
        }
        .div1{
            background: #FF0000;    
        }
        .div2{
            background: #000000;
            display:none;
        }
    </style>
</head> 
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><scripttype="text/javascript">
    $('.div1').click(function aparece() {
        $('.div2').css('display', 'block');
    });
</script>

Or you can also choose to create a class and get it by putting

<html>
<head>
    <title>quadrados</title> 
    <style>
        div{
            width:100px;
            height: 100px;
        }
        .div1{
            background: #FF0000;    
        }
        .div2{
            background: #000000;
            display:none;
        }
        .show{
            display: block !important;
        }
    </style>
</head> 
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><scripttype="text/javascript">
    $('.div1').click(function aparece() {
        $('.div2').toggleClass('show');
    });
</script>

I hope I was helpfull, thanks for listening, Italo Drago.