防止动作发生两次

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

各得到任何AREADY打开，关闭菜单，打开用户点击这里，像accordeon（一次一个）。

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

1. 将关闭当前子菜单

2. 将再次打开。

如何防止这样的事情发生？

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

Thansks

编辑：

我达到这一点：：根据需要

       <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

HTML（@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

我可能会建议做这样的事情：

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

Answer 3

也许这样的事情？

// 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'); 

影响可读性有点虽然。

Answer 4

尝试 - demo

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