Question

我使用<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();
});

每个菜单都打开，关闭并打开用户点击的位置，就像手风琴一样（一次一个）。

但是，如果我点击相同，该事件将发生两次。

将关闭当前子菜单



将再次打开。

我怎样才能防止这种情况发生？

我接受任何提示，使此活动更好/ 智能。

Thansks

编辑：

根据需要

html

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

编辑2：

我达到了这个目标：（ @Jayendra ，做同样的事情）

但是第二级，关闭。

     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

正在发生的事情是，您正在循环的.ulNone会选择与ul选择器相同的$(this).find('>ul')，导致其关闭然后再次打开。

由于您希望顶部按钮驱动切换，因此您应该将事件放在该按钮上，而不是li。

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

工作示例：http://jsfiddle.net/hunter/cnWjg/

Answer 2

尝试 - demo

$('#ulAcoesCliente li').click(function(ev) {
    if(!$(this).find('>ul').is(':visible')){
        $(".ulNone:visible").hide('slow');
        $(this).find('>ul').toggle('slow');
        ev.stopPropagation();
    }
});

Answer 3

我可能会建议这样做：

$('#ulAcoesCliente li').click(function() {
  $('#ulAcoesCliente li').slideUp();
  $(this).slideDown();
});

Answer 4

也许是这样的？

// caching
var $ulNone = $('.ulNone').filter(function () {
    return $(this).css('display') === 'block';
});

// handler
$('#ulAcoesCliente > li').click(function (e) {

    e.stopPropagation();

    var $myUl = $(this).find('> ul').show('slow');
    $ulNone.not($myUl).hide('slow');

});

关键是从你隐藏的套装中删除你点击的UL。

当然，如果你是关于它的OC，你可以将toggle逻辑抛到一个语句中：

$ulNone.not(
    $(this).find('> ul').show('slow')
).hide('slow');

虽然有点伤害了可读性。

防止动作发生两次

4 个答案: