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");
}

我想做的是：

打开面板，然后
通过点击页面中的任意位置但在面板中单击
在面板内的关闭按钮上，
在打开它的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");
    }
});

小提琴：Fiddle

Answer 2

我在http://www.360kayak.org：http://pastebin.com/UVvELYES

中实现了这一点

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

解决方案为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();
        }
      });

这会阻止您在单击时滑动表单

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

显示隐藏div点击另一个div并通过点击外面的任何地方关闭它

2 个答案: