当用户点击外部时隐藏 div 除非关闭灯箱

Question

我目前正在使用以下代码来允许用户在点击时显示/隐藏 div。 单击 div 外的任意位置时，会关闭 div。

但是，在 div 中有一个可以打开灯箱的链接。当用户关闭该灯箱时，它也会关闭包含链接的 div。我可以在脚本中添加什么来阻止这种情况发生吗？

$(document).ready(function(){

$("a.dropdown-link").click(function(evt) {
  evt.preventDefault();
  var $div = $(this).next('.info-container');
  $(".info-container").not($div).slideUp();
    if ($div.is(":visible")) {
        $div.slideUp()
    }  else {
       $div.slideDown();
    }
});

$(document).click(function(e){
    var p = $(e.target).closest('.dropdown').length
    if (!p) {
          $(".info-container").slideUp();
    }
});
     $('.movie-link').magnificPopup({type:'iframe'});
});

<a class="dropdown-link" href="#"><div class="dropdown dropdown-processed">More info</div></a>
<div class="info-container" style="display: none;">Video preview: <a class="movie-link" href="videourl"></a></div>

我正在为灯箱使用 Magnific Popup：http://dimsemenov.com/plugins/magnific-popup/

我的 JavaScript 知识非常基础，因此不胜感激。

Answer 1

在“点击关闭div功能中，可以查看灯箱是否开启。一个简单的if ($("#lightbox").css("display") == "none")应该可以搞定

编辑：将此行放在$(document).ready 行之后

var state = 0; // default state
$('.movie-link').click(function() { state = 1; }); // state = 1, lightbox on

在源代码的第 384 行，插入这段代码

state = 2; //state = 2, lightbox close button clicked

当状态为 1（灯箱打开并单击灯箱内部或外部的随机内容）或 2（灯箱的关闭按钮被点击）时，这个想法不会触发“关闭 div”功能，并在以下情况下返回状态为 0是 2

所以不要使用我在评论中提供的if 使用这个

if (state == 2) {
    state = 0;
} else if (state == 0) {
    //rest of the code
}

这只是我整理的东西，还没有测试，所以我实际上不知道它是否有效，所以只是备份你的js文件以防万一。

编辑 2：

删除编辑 1 中的所有更改并使用它而不是 if (state == 2) {

if (e.target != $('.mfp-bg')[0] and e.target != $('.mfp-wrap')[0]) {

编辑 3

var e_class = $(e.target).attr('class');
if (e_class != 'mfp-close' && e_class != 'mfp-container') {

工作示例：http://imgcrash.comeze.com/test.html

Answer 2

我不是 100% 没有实际测试这一点，但您可能会遇到 $(document).click(...); 的问题，因为单击 document 上的任何位置都会触发此事件。

当您关闭弹出窗口时，您可能会触发此事件并向上滑动info-container div。

您似乎正在寻找对 .dropdown 类的 div 的点击。为什么不使用类似的东西：

$('.dropdown').click(function(e) { ... });

Answer 3

试试这个：

$("a.dropdown-link").click(function(evt) {
  evt.preventDefault();
  evt.stopPropagation(); //We stop the propagation of the event

  //Changed it to slideToggle and added stop to prevent weird animation
    //on multiple clicks
  $(this).next('.info-container').stop().slideToggle()
});

$(document).click(function(e){
    //Check if it has the class info-container
    if (!$(e.target).hasClass("info-container")) {
          $(".info-container").slideUp();
    }
});
     $('.movie-link').magnificPopup({type:'iframe'});

Fiddle