Question

i made a small menu with <ul> <li>:

js:

$('#ulAcoesCliente li').click(function(ev) {
    $(".ulNone").each(function(){
        if($(this).css("display") == "block"){
            $(this).hide('slow');
        }
    });
    $(this).find('>ul').toggle('slow');
    ev.stopPropagation();
});

the each get any menu aready opened, close and open where the user click, like a accordeon ( one at a time ).

but if i click in the same, the event will happen twice.

1. will close the current sub-menu

2. will open again.

how can i prevent that to happen ?

i accept any tips to make this event more better/intelligent.

Thansks

edit:

html as required

                              <ul id="ulAcoesCliente">
                                    <li>
                                        <button style="font-size: 9px;" id="optComentario">Comentario</button>
                                        <ul class='ulNone' style="display: none;">
                                            <li>
                                                <button style="font-size: 9px; width: 150px;" id="liInserirComentario">Inserir comentario</button>
                                                <ul style="display: none;">
                                                    <li>
                                                        <div style="margin-left: 10px;padding: 5px;">
                                                            <input id="comentario" type="text" size="20"/>
                                                            <button style="font-size: 9px; width: 60px;" id="butInsereComent">Salvar</button>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li style="margin-top: 3px;"><button style="font-size: 9px; width: 150px;" id="listaComent">Listar comentarios</button></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <button style="font-size: 9px; margin-top: 3px;" id="OptEmail">E-mail</button>
                                        <ul class='ulNone' style="display: none;">
                                            <li style="margin-top: 5px;"><button style="font-size: 9px; width: 150px;" id="enviaEmail">Enviar E-mail</button></li>
                                            <li style="margin-top: 3px;"><button style="font-size: 9px; width: 150px;" id="listaEmails">Listar E-mails</button></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <button style="font-size: 9px; margin-top: 3px;" id="">Tarefa</button>
                                        <ul class='ulNone' style="display: none;">
                                            <li style="margin-top: 5px;"><button style="font-size: 9px; width: 150px;" id="">Criar Tarefa</button></li>
                                            <li style="margin-top: 3px;"><button style="font-size: 9px; width: 150px;" id="">Listar Tarefas</button></li>
                                        </ul>
                                    </li>
                                </ul>

edit 2:

i reach this: ( @Jayendra, did the same )

but the second level, close.

     if(!($(this).children('ul').css("display") == "block")){
        $(".ulNone").each(function(){
            if($(this).css("display") == "block"){
                $(this).stop(true,true).hide('slow');
            }
        });
        $(this).find('>ul').stop(true,true).toggle('slow');
        ev.stopPropagation();
    }

Answer 1

What is happening is that this .ulNone that you’re looping through will select the same ul as your $(this).find('>ul') selector, causing it to close and then open again.

Since you want the top buttons to drive the toggling you should put the event on that, not the li.

$('#ulAcoesCliente > li > button').click(function(ev) {
    $(this).next().toggle('slow');
    $(this).parent("li").siblings().find(".ulNone:visible").toggle('slow');
});

---

Working Example: http://jsfiddle.net/hunter/cnWjg/