Показать скрыть DIV нажав на другой DIV и закрыть его, нажав на кнопку в любом месте за пределами

Question

У меня есть этот HTML:

<div class="trigger"> 
    My button 
</div> 

<div class="panel"> 
    <span class="close-btn"></span> 
     My panel 
</div> 

и этот JQuery:

$(".trigger").click(function() { 
$('.panel').fadeIn("fast"); 
$(this).toggleClass('isOpen'); 
}); 


$(".close-btn").click(function() { 
$('.panel').fadeToggle("fast"); 
$('.trigger').removeClass('isOpen'); 
}); 

$('.panel').hover(function() { 
mouse_is_inside = true; 
}, function() { 
mouse_is_inside = false; 
}); 

$("body").mouseup(function() { 
if (!mouse_is_inside) $('.panel').fadeOut("fast"); 
$('.trigger').removeClass('isOpen'); 
}); 

if ($(".trigger").hasClass('isOpen')) { 
$('.panel').fadeOut("fast"); 
}​ 

То, что я хочу сделать, это:

1. откройте панель, а затем
2. закройте ее, щелкнув в любом месте страницы, но в панели i tself,
3. на закрывающей кнопке внутри панели и,
4. на div, который его открыл.

, но я не могу заставить его работать, когда панель открыта, «триггер» деления путается и продолжает открывать и закрывать панель из-за функции, которая позволяет мне щелкнуть в любом месте страницы.

Спасибо за помощь

Answer 1

Это может быть не красивое решение:

$(".trigger").click(function() { 
    $('.panel').fadeIn("fast"); 
}); 

$(".close-btn, .panel").click(function(e) { 
    e.preventDefault(); 
    $('.panel').fadeOut("fast"); 
}); 

$(document).on('click', function(e) { 
    if (!(e.target.className == 'trigger' || e.target.className == 'panel' || e.target.className == 'close-btn')) { 
     $('.panel').fadeOut("fast"); 
    } 
}); 

Fiddle: Fiddle

Answer 2

Это, как я реализовал это в http://www.360kayak.org: http://pastebin.com/UVvELYES

I надеюсь, что это может быть вдохновение.

Решение event.stopPropagation(); и вызов stop() перед animate() Моей анимации является slideUp/slideDown, не выцветает, но он должен работать даже с замиранием.

Эта часть управляет «щелчком снаружи, чтобы закрыть».

$('html').click(function(event) { 
     var formWrapper = $("#block-user-login-form-wrapper"); 
     if (formWrapper != null && formWrapper.position() != null && formWrapper.position().top == 0) { 
      $("#block-user-login-form-wrapper").stop().animate({ 
      top: "-128px" 
      }, null, null, function() { 
      $("#signin-button").addClass("enabled"); 
      }); 
      event.stopPropagation(); 
     } 
     }); 

И это мешает slideup формы при нажатии она

$("#block-user-login-form").click(function(event) { 
    event.stopPropagation(); 
    });