顯示隱藏在內部的div一個div點擊，並通過點擊任何地方關閉它外面

我有這個網站：顯示隱藏在內部的div一個div點擊，並通過點擊任何地方關閉它外面

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

我想要做的是：

打開面板，然後，
通過單擊頁面中的任意位置但在面板中關閉它i tself，
面板上的關閉按鈕和
上的div打開它。

但我不能得到它的工作，因爲當面板打開div「觸發器」變得困惑，並保持打開和關閉面板，因爲該功能允許我點擊頁面中的任何地方。

感謝您的幫助

來源

2012-06-13 Newbrigand

嘗試尋找在右上頁登錄（Accedi）按鈕http://www.360kayak.org/。這是你想要的效果嗎？ –

是的亞歷山德羅，這是我想要做的，但顯然與淡入淡出，而不是幻燈片效果。：=） – Newbrigand

這可能是一個不漂亮的解決方案：

$(".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

來源

2012-06-13 12:29:00

這是我如何http://www.360kayak.org實現了這個：http://pastebin.com/UVvELYES

我希望它能成爲一種靈感。

的解決方案是event.stopPropagation();並呼籲stop()前animate() 我的動畫是一個效果基本show /了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(); 
     } 
     });

這防止效果基本show的形式，當你點擊它

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

來源

2012-06-13 12:52:12

顯示隱藏在內部的div一個div點擊，並通過點擊任何地方關閉它外面

回答

相關問題