jQuery, оживить и оживить назад. Ошибка функции обратного вызова? : S

Question

Я понятия не имею, что я сделал. Идея состоит в том, чтобы анимировать элемент, который можно сдвинуть с позиции и отступить назад, когда щелкнул другой элемент. Я применил второе событие в обратном вызове исходной функции события.

Но, несмотря на эту структуру, вторая функция события будет работать, хотя я не нажал второй элемент в функции обратного вызова.

Если вы не следуете, основная идея такова.

Нажмите -> slidein -> снаружи нажмите -> выскользнуть

$('#mobileList').click(function(){ 
    $('#mobileMenu').css({'display':'block'}).animate({ 
     'left':'30%' 
    },500,function(){ 
     $('#body').click(function(){ 
      $('#mobileMenu').animate({ 
       'left':'100%' 
      },500,function(){$('#mobileMenu').css({'display':"none"});/* I tried return false; here, failed to solve problem*/}); 
     }); 
    });   
}); 

Запуск CSS

nav#mobileMenu{display:none;width:70%;height:100%;background:#191820;color:#DCDCDC;position:fixed;top:0;left:100%;} 

Как элементы структурированы.

<div id="body"> 
    <a id="mobileList>&#9776;</a> 
    <!-- content here --> 
</div> 
<nav id="mobileMenu"> 
    <!-- content --> 
</nav> 

В первых двух попытках он отлично работает. В следующий раз, когда я приеду, он будет оживлять, а затем сразу же оживить. Я действительно не понимаю, почему, поскольку это функция обратного вызова? : S

Я думаю, это потому, что элемент #mobileList находится внутри элемента #body.

Ожидается ли еще вызов? Могу ли я прекратить поиски этого события?

Должен ли я использовать queue() для запуска слайда и выдвижения?

Answer 1

Вам не нужно обратного вызова здесь, просто зацепить click обработчики отдельно:

$('#mobileList').click(function(){ 
    $('#mobileMenu').show().stop(true).animate({ 
     'left': '30%' 
    }, 500);   
}); 

$('#body').click(function(){ 
    $('#mobileMenu').stop(true).animate({ 
     'left': '100%' 
    }, 500, function() { 
     $(this).hide(); 
    }); 
}); 

Example fiddle

Обратите внимание, что я использовал show/hide вместо css и добавил вызовы stop() для предотвращения очередь заполняется при последовательных кликах во время анимации.

---

UPDATE

Чтобы скрыть меню при нажатии кнопки в другом месте вам нужно прикрепить обработчик события к document и проверить e.target, чтобы увидеть, какой элемент вызвал событие. Если это было вне меню, скройте его.

$('#mobileList').click(function (e) { 
    e.stopPropagation(); 
    $('#mobileMenu').show().stop(true).animate({ 'left': '30%' }, 500); 
}); 

$(document).click(function (e) { 
    var $menu = $('#mobileMenu'); 
    if (!$menu.is(e.target) && !$menu.has(e.target).length) { 
     $('#mobileMenu').stop(true).animate({ 'left': '100%' }, 500, function() { 
      $(this).hide(); 
     }); 
    } 
}); 

Updated fiddle