显示隐藏一个 div 单击另一个 div 并通过单击外部任意位置将其关闭答案

【问题标题】：Show hide a div clicking on another div and closing it by click anywhere outside显示隐藏一个 div 单击另一个 div 并通过单击外部任意位置将其关闭
【发布时间】：2012-06-13 08:32:07
【问题描述】：

我有这个 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");
}

我想做的是：

打开面板，然后，
通过单击页面中的任意位置但在面板本身中将其关闭，
在面板内的关闭按钮上，
在打开它的 div 上。

但我无法让它工作，因为当面板打开时，div“触发器”会因为允许我单击页面中任意位置的功能而感到困惑并不断打开和关闭面板。

感谢您的帮助

【问题讨论】：

尝试查看右上角的登录 (Accedi) 按钮 360kayak.org。这是你想要的效果吗？
是的，Alessandro 这就是我想做的，但显然是带有淡入淡出而不是幻灯片效果。 :=)

标签： jquery panel selector

【解决方案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

【讨论】：

【解决方案2】：

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

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

解决方案是event.stopPropagation(); 并在animate() 之前调用stop() 我的动画是 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();
        }
      });

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

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

【讨论】：