Far apparire/scomparire un sottomenù al click

lorenzo84

Utente Attivo
22 Lug 2012
239
0
16
Buongiorno, non riesco a far si che al click su una categoria vengano espanse/ridotte le sottovoci.

La struttura del menù è questa:
Codice:
<ul class="nav nav-tabs nav-stacked main-menu">
<li style='background-color:#99FFCC;' class="nav-header hidden-tablet">Menù</li>
       <li><a class="ajax-link" href="admin.php"><i class="icon-home"></i><span class="hidden-tablet">&nbsp;Dashboard</span></a></li>
<li style='background-color:#99FFCC;' class="nav-header hidden-tablet">Agenda</li>
       <li><a class="ajax-link" href="nuovo_appuntamento.php"><i class="icon-pencil"></i><span class="hidden-tablet">&nbsp;Nuovo Appuntamento</span></a>
      <li><a class="ajax-link" href="nuovo_appuntamento.php"><i class="icon-pencil"></i><span class="hidden-tablet">&nbsp;Nuovo Appuntamento</span></a>
</li>
</ul>
Io vorrei che tutte le voci siano nascoste e cliccando su Menu o Agenda o un'altra categoria (che ho omesso per spazio) si espandono le voci sotto. E' possibile farlo?

Io avevo provato a riadattare questo script:

Codice:
<script type="text/javascript">
$(document).ready(function(){
	$(" li > *:not(h3)").hide();
	$(".ajax-link").css("cursor","pointer").click(function (){
		//selezioniamo tutte le risposte
		var risposta = $(this).siblings();
		//mostriamo/nascondiamo le risposte
		risposta.slideToggle("slow");
	});
});

</script>
Però non sono riuscito. Grazie per l'aiuto.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, secondo me dovresti rivedere l'html del menu
prova questo esempio
HTML:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script  type="text/javascript">
            $(document).ready(function() {
                $(".lista li ul").hide();
                $(".lista li.nav-header").click(function() {
                    $(".lista li ul").hide();
                    $(this).children("ul").show();
                });
            });
</script>
<ul class="lista">
    <li class="nav-header"> Categoria 1
        <ul>
            <li>voce categoria 1</li>
            <li>voce categoria 1</li>
        </ul>
    </li>
    <li class="nav-header"> Categoria 2
        <ul>
            <li>voce categoria 2</li>
            <li>voce categoria 2</li>
        </ul>
    </li>
</ul>