chiudere un div in automatico

Marco196943 · 2 Gen 2013

Salve e auguri a tutti, avrei bisogno di un aiutino: sto cercando di di creare una sorta di menu, che a seconda dela voce che chiamo mi apre un div.
Ma non riesco a far chiudere il div in automatico quando clicco sulla seconda voce; io sono arrivato fin qui.

Codice:

<script>
  $(document).ready(function () {
    $(".apri").click(function () {
		$("#contenitore").slideToggle("slow")
	});
});
  $(document).ready(function () {
    $(" .apri1").click(function () {
		$("#contenitore1").slideToggle("slow")
	});
});
  $(document).ready(function () {
    $(".apri2").click(function () {
		$("#contenitore2").slideToggle("slow")
	});
});

criric · 2 Gen 2013

Ciao,
potresti dare una classe a tutti i contenitori e prima di aprirne uno li chiudi tutti

Codice:

$(".apri").click(function () {
                $(".tutti").slideUp();
		$("#contenitore").slideToggle("slow")
	});

non ho testato

Marco196943 · 2 Gen 2013

grazie per la risposta

forse non mi sono espresso bene:
la mia intenzione e quella di reare una sorta di menu, con home forum ecc..
e al click apre un div, e quando clicco su un'altra voce di menu chiude il precedente e apre il nuovo

Nefyt · 2 Gen 2013

Marco196943 ha scritto:
forse non mi sono espresso bene:
la mia intenzione e quella di reare una sorta di menu, con home forum ecc..
e al click apre un div, e quando clicco su un'altra voce di menu chiude il precedente e apre il nuovo

Se ogni apertura contiene il div prova cosi

Codice:

  $(document).ready(function () {
    $(".apri").click(function () {
                $('#contenitore','.apri').slideUp();
		$('#contenitore',this).slideToggle("slow");
	});
});

criric · 2 Gen 2013

e al click apre un div, e quando clicco su un'altra voce di menu chiude il precedente e apre il nuovo

ma hai provato?
per chiuderli tutti intendevo cmq chiudere l'unico aperto, pero non sapendo qual'è quello aperto si fa prima a dare il comendo per chiuderli tutti

Marco196943 · 2 Gen 2013

Scusa ma non è che sono una cima ti posto il mio codice se non ti dispiace perchè io non riesco a farlo funzionare se hai pazienza io ti ringrazio

Codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
 $(document).ready(function () {
    $(".apri").click(function () {
                $('#contenitore','.apri').slideUp();
		$('#contenitore',this).slideToggle("slow");
	});
});
  </script>

  <style>
body{
margin: 0;
}

.apri{
	font-size:18px;
	font-family:Verdana, Geneva, sans-serif;
	float:left;
	list-style-type: none;
	margin-left: 30px;
	margin-top: 0px;
	color: #F00;
}

#pannello{
	background: #000;
	width: 400px;
	height: 50px;
	color: #FFF;
	text-align: center;
	cursor: pointer;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#contenitore{
	width: 960px;
	height: 520px;
	text-align: center;
	display: none;
	background-color: #03C;
	margin-top: 20%;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
} 
 
  </style>
</head>
<body>
<div id="pannello">
  <ul>
    <li class="apri"> Clicca qui</li>
     <li class="apri"> Clicca qui1</li>
    <li class="apri"> Clicca qui2</li>
  </ul>
</div>
<div id="contenitore">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="contenitore">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="contenitore">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>



</body>
</html>

Nefyt · 2 Gen 2013

Cosi ti dovrebbe funzionare

Codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
<script>
 $(document).ready(function () {
    $(".apri").click(function () {
               var cl=$(this).index();
               $('.contenitore').slideUp();
               $('.contenitore').each(function(i){
                   if(i==cl) $(this).slideToggle('slow');
               });
	});
});
  </script>

  <style>
body{
margin: 0;
}

.apri{
	font-size:18px;
	font-family:Verdana, Geneva, sans-serif;
	float:left;
	list-style-type: none;
	margin-left: 30px;
	margin-top: 0px;
	color: #F00;
}

#pannello{
	background: #000;
	width: 400px;
	height: 50px;
	color: #FFF;
	text-align: center;
	cursor: pointer;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.contenitore{
	width: 960px;
	height: 520px;
	text-align: center;
	display: none;
	background-color: #03C;
	margin-top: 20%;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
} 
 
  </style>
</head>
<body>
<div id="pannello">
  <ul>
    <li class="apri"> Clicca qui</li>
     <li class="apri"> Clicca qui1</li>
    <li class="apri"> Clicca qui2</li>
  </ul>
</div>
<div class="contenitore">1
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="contenitore">2
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="contenitore">3
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>



</body>
</html>

Marco196943 · 2 Gen 2013

Grazie!!!!!!!!

Dirti grazie è poco:beer:se un giorno saprò chi sei e ti incontrerò:quote:

Cerca

Cerca

chiudere un div in automatico

Marco196943

Utente Attivo

criric

Super Moderatore

Marco196943

Utente Attivo

Nefyt

Utente Attivo

criric

Super Moderatore

Marco196943

Utente Attivo

Nefyt

Utente Attivo

Marco196943

Utente Attivo

Discussioni simili