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.
 
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>
 

Discussioni simili