jquery - 显示隐藏一个 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. 通过单击页面中的任意位置但在面板本身中关闭它，
3. 在面板内的关闭按钮上，
4. 在打开它的 div 上。

但我无法让它工作，因为当面板打开时，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");
    }
});

小提琴：小提琴

Answer 2

这就是我在 http://www.360kayak.org 中实现的方式：http : //pastebin.com/UVvELYES

我希望它可以成为一种灵感。

解决方案是，在我的动画之前event.stopPropagation();调用 是slideUp/slideDown，而不是淡入淡出，但即使淡入淡出它也应该工作。stop()animate()

这部分管理“点击外部关闭”。

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

这可以防止在单击时向上滑动表单

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