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时返回状态为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

除非关闭灯箱，否则在用户点击外部时隐藏div

3 个答案: