aiuto su jquery:menu a comparsa

**liviasettantuno** · 07-08-2013, 11:29

Scusate, lo so è il 7 di agosto, ma provate a capire pure me... sono 2 giorni bloccata su questo stupidissimo codice ma non ne esco.Parlo di nozioni basi, per chi lo mastica da sempre mi darà la soluzione in un attimo, magari rimanendo sotto l'ombrellone, ma a me mi risolve un bel dilemma!!!
Si tratta di un banalissimo menu a tendina. vorrei che al clic di ogni "li" principale si apra il sottomenu. Sono riuscita a nascondere, ma oltre a questo non riesco ad andare.
Qualcuno può dirmi dove sbaglio?

Grazie infinite.

il codice è questo

codice:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Documento senza titolo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/script-sommario.js"></script>

<style>

ul, li {margin:0; padding:0; list-style:none;}

#sommario {width:400px;}

#sommario li {
	cursor:pointer;
	background:#9F0139 url(../images/arrows.png) no-repeat right top;
	margin:0;
	border-bottom:1px dotted #fff; 
	
}

#sommario li.no-image {background-image:none;}

#sommario li a {
	color:#fff;
	font-size:1em;
	line-height:2.3em;
	padding-left:10px;}

#sommario ul li {
	background-color:#f1e9d4;
	background-image:none;
	margin:0;
	padding: 0;
	font-size:1em;
}

#sommario ul li a {
	font-size:0.85em;
	color:#f60;}



footer nav li.top {
	width:100%; 
	background-color:#fff; 
	height:40px; 
	padding-right:3%;
	}
	
footer nav li.top a {
	color:#9F0139; 
	text-align:right; 
	font-size:1em;  
	float:right; 
	text-decoration:none; 
	padding-right:5%; 
	}



</style>
</head>

<body>
<nav>
  <ul id="sommario">[*]chi siamo
    	<ul>
      		[*]la mission
      		[*]i clienti
      		[*]dove siamo[/list]
    
[*]servizi
    	<ul>
      		[*]grafica
      		[*]stampa
      		[*]web
      		[*]gadget
     		[*]partecipazioni di nozze
      		[*]servizi di fotoritocco
  		[/list]
   
   [*]promo
    	<ul>
      		[*]per lanciare al meglio la tua azienda
      		[*]per promuovere la tua azienda
      		[*]per promuovere i tuoi eventi
      		[*]per promuovere la tua attività commerciale
      		[*]per il tuo natale
      		[*]per il tuo matrimonio
  		[/list]
    
    <li class="no-image">definitivi per la stampa
  	<li class="no-image">listino prezzi
 	<li class="no-image">richiedi un preventivo
    <li class="no-image">come raggiungere Graf[/list]
  
</nav>
</body>
</html>

e lo script jquery

codice:

$(document).ready(function(){
$( 'ul#sommario > li > ul')
	.hide()
});	

/*---------------------------------------*/

$( 'ul#sommario > li').click(function(){
	
		$('ul#sommario > li > ul').animate( 
			{'height':'toggle'}, 'slow'
		);	
	});

**cavicchiandrea** · 07-08-2013, 11:36

prova ad aggiungere show (per cambiare lo stato dispaly da hide)
$('ul#sommario > li > ul').show().animate(
{'height':'toggle'}, 'slow'
);

**liviasettantuno** · 07-08-2013, 11:47

niente da fare.. non cambia nulla..

**cavicchiandrea** · 07-08-2013, 12:43

Ma questo blocco

codice:

$( 'ul#sommario > li').click(function(){
	
		$('ul#sommario > li > ul').animate( 
			{'height':'toggle'}, 'slow'
		);	
	});

è dentro al $(document).ready(... giusto? Nel caso non lo fosse metticelo

**liviasettantuno** · 07-08-2013, 16:20

Assolutamente si! è tutto nello stesso script. Solo che l'hide me lo fa e il resto no...
(scusa il ritardo nella risposta ma ho avuto problemi di connessione).

**cavicchiandrea** · 07-08-2013, 16:33

Metti il link alla pagina online pubblica

**liviasettantuno** · 07-08-2013, 16:47

Innanzitutto GRAZIE.

la pagina è questa:
http://www.graf.roma.it/html52/prova.html

**Laurianti** · 07-08-2013, 18:46

Non so usare molto jQuery, non mi piace
So che è un pò arrangiato ma intanto così lo fai funzionare:

codice:

$(document).ready(function(){
  $( 'ul#sommario > li > ul' ).hide();

  $( 'ul#sommario > li' ).click(function(){
    $( this ).children( 'ul' ).show().animate(
        {'height':'toggle'}, 'slow'
    );
  });
});

Soltanto una cosa, perché hai messo toggle che da un effetto a dileguare nonostante debba apparire?
E attenzione che hai sbagliato a scrivere l'url del file js di jQuery, da google, e stai cercando il file arrows.png in un'altra cartella!

**cavicchiandrea** · 07-08-2013, 19:47

Originariamente inviato da liviasettantuno
Assolutamente si! è tutto nello stesso script. Solo che l'hide me lo fa e il resto no...
(scusa il ritardo nella risposta ma ho avuto problemi di connessione).

E' tutto nello stesso script ma l'evento click e fuori dal ready usa il codice che ha scritto Laurianti

**liviasettantuno** · 07-08-2013, 20:50

Grazie ad entrambi! quindi mi pare di capire che avevo chiuso prima del tempo lo script...io odio tutte quelle chiusure, mi confondono sempre.

Grazie Laurianti, con il tuo codice funge. Hai ragione tu nel suggerimento che mi dai, adesso lo vado a migliorare nel suo funzionamento. E grazie anche per gli errori trovati.

Siete stati entrambi gentilissimi, vorrei dire a "buon rendere" ma su questa materia direi un'enorme bugia!

Buona serata!

Discussione: aiuto su jquery:menu a comparsa

Strumenti discussione

Ricerca discussione

Visualizza

aiuto su jquery:menu a comparsa

Permessi di invio