javascript - hide dropdown on 'body' 点击产生需要双击再次显示

Question

我有这个下拉菜单，当一个菜单被点击时，如果有另一个菜单处于事件状态，则这个菜单被停用，然后新的菜单被激活:

$('.idiomas span.current').toggle(function(){
   //alert(true);
   $('.idiomas span.clicked').next('ul').hide();
   $('.idiomas span.clicked').removeClass('clicked');
   $(this).next('ul').fadeIn();
   $(this).addClass('clicked');
 },
 function() {
   $(this).next('ul').hide();
   $('.idiomas span.current:not(.clicked)').show();   
 });

好的，直到这里工作正常，但后来我希望当用户在整个菜单外单击时隐藏菜单；发现点击 body 应该可以按我的需要工作:

 $('body').bind('click', function(e) {
   if($(e.target).closest('.idiomas ul').length == 0) {
     // se ha clickado fuera del menu
     $('.idiomas ul').hide();
     $('.idiomas span.current').removeClass('clicked').show();
     $('.facebook').css('visibility','visible');
   } else {
     // dentro: no hacemos nada.
   }
 });

它确实隐藏了，但我需要在下一个菜单项中单击两次才能使其子菜单可见，

知道为什么吗？

Answer 1

这里有些东西可能会有所帮助。这是它的 JSFiddle:http://jsfiddle.net/aTqP5/

你的问题的基本要点是切换有两种状态，当你点击主体时，元素被隐藏但切换状态仍然是“显示”并且必须去“隐藏”然后回到“显示” "再次点击两次。

$(document).ready(function(){    
    $('.idiomas span.current').click(function(event){
        event.stopPropagation();
        if ( $(this).hasClass('clicked') ) {
            $(this).removeClass('clicked');
            $(this).siblings('ul').hide();
        } else {
            $('.idiomas span.clicked').removeClass('clicked').siblings('ul').hide();
            $(this).addClass('clicked');
            $(this).siblings('ul').fadeIn();
        }
    });

    $('body').click(function(event) {
        event.stopPropagation();
        if ( $('.idiomas span.clicked').length > 0 ) {
            $('.idiomas ul').hide();
            $('.idiomas span.current').removeClass('clicked');
        }
    });
});