Question

我创建了一个包含以下HTML的自定义灯箱：

<a href="#" class="lightbox">
    <img src="thumbnail.jpg" />
    <div class="box">
        <img class="boximage" src="full-image.jpg" />
        <p>Caption</p>
        <div class="close"><p>x</p></div>
    </div>
</a>

点击具有.boximage类的单个缩略图时，以下JavaScript会打开正确的单个完整.lightbox班级图片。

$('.lightbox').click(function(){
    $(this).find('.box, .boximage').css('display', 'block');
});

以前我有一些JavaScript可以在你点击关闭x时关闭灯箱。

$('.close').click(function(){
    $('.box, .boximage').css('display', 'none');
});

但我似乎无法让近距离的灯箱工作。

如何使关闭功能起作用？

Answer 1

使用stopPropagation阻止事件冒泡DOM树，防止任何父处理程序收到事件通知。

$('.close').click(function(e){
   e.stopPropagation();
   $('.box, .boximage').css('display', 'none');
});

当你在灯箱中绑定点击事件并点击关闭按钮时，也适用于要点击的灯箱。所以，你需要防止冒泡树。

Answer 2

@BhojendraNepal已正确指出关键是使用event.stopPropagation()。除此之外，如果您需要在页面上包含多个此类元素，则需要保留点击的context，如下所示：

$('.close').click(function(e){
    e.stopPropagation();
    $(this).closest('.box').css('display', 'none');
});

$('.lightbox').click(function(){
    $(this).find('.box, .boximage').css('display', 'block');
}); 
$('.close').click(function(e){
    e.stopPropagation();
    $(this).closest('.box').css('display', 'none');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1. <a href="#" class="lightbox">
  <img src="thumbnail.jpg">
  <div class="box">
    <img class="boximage" src="full-image.jpg"/>
    <p>Caption</p>
    <div class="close">
      <p>x</p>
    </div>
  </div>
</a>
<br>2. 
<a href="#" class="lightbox">
  <img src="thumbnail.jpg">
  <div class="box">
    <img class="boximage" src="full-image.jpg"/>
    <p>Caption 2</p>
    <div class="close">
      <p>x</p>
    </div>
  </div>
</a>
<br>3. 
<a href="#" class="lightbox">
  <img src="thumbnail.jpg">
  <div class="box">
    <img class="boximage" src="full-image.jpg"/>
    <p>Caption 3</p>
    <div class="close">
      <p>x</p>
    </div>
  </div>
</a>

如何让jQuery隐藏自定义灯箱

2 个答案: