防止動作發生兩次

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