Question

我在div内有一张图片。 div必须在点击时调整大小，所以我使用jQuery来切换不同高度的类。

$(document).ready(function(){
    $('.class').on('click', function() {
    $(this).toggleClass('clicked');
    });
});

但我还需要使用a href将图像插入到div中，这将打开一个灯箱。单击图像不仅会打开灯箱，还会展开其下的div。有没有办法点击图像不会影响div？我试过了z-index，但它没有用。

Answer 1

您可以尝试在此使用e.stopPropagation()来防止click事件冒泡到其父级：

$('.class img').on('click', function(e) {
     e.stopPropagation();
});

由于我不知道您的HTML标记，因此我认为您的图片是.class元素的子图片。

Answer 2

事实证明，点击确实有来浏览DOM结构，因此它会触发jQuery灯箱。将div class="toggle"插入div class="class"修复了问题。然后我修改了jQuery：

$('.toggle').on('click', function() {
$(this).toggleClass('clicked');
$(this).parent().toggleClass('clicked');
});

我使用parent（），因为div class="class"有多个实例。

这种方式div class="toggle"在DOM中较低，但完全覆盖div class="class"。单击切换将平均扩展/收缩两个div。 a href的图片放在div class="class"中，因此它在DOM中较高（单击它不会触发切换操作）但在两个div上方可视（因此灯箱的工作方式类似于冠军）。

单击DIV内的可单击图像不应影响DIV本身

2 个答案: