0

基本上我有一个元素，单击该元素会导致另一个元素滑动切换。然而我所追求的是另一个元素，比如一个图像，在主父元素内，当它被点击时，它不会触发 slideToggle 事件，并且可以用来触发另一个事件......

我的代码的简化版本在这里：

http://jsfiddle.net/s3d5D/6/

..蓝色框是图像的替代品。

标记：

<div class="holder">
    <div class="section"><div class="image"></div></div>
    <div class="hidden"></div>
</div>

jQuery：

$('.hidden').hide();
$(document).on('click', '.section', function(){
    $(this).nextAll('.hidden:first').slideToggle(500);
});
4

3 回答 3

1

您可以在子元素处停止事件的传播：

$(document).on('click', '.image', function (e) {
    e.stopPropagation();
});

这是一个工作示例。请注意，我已将您现有的on调用与上述链接在一起，因此您不必创建多个 jQuery 对象。

于 2012-07-04T19:48:23.683 回答
1

我使用了与James或多或少相同的方法，因为我已经使用了event.stopPropagation()，但我选择了click在方法中评估事件的目标on()，而不是链接两个或可能更多的调用on()：

$(document).on('click', '.section, .image', function() {
    var thisClass = $(this).is('.section') ? 'section' : 'image';
    if (thisClass == 'section') {
        $(this).nextAll('.hidden:first').slideToggle(500);
    }
    else if (thisClass == 'image') {
        e.preventDefault();
    }
});​

JS 小提琴演示。

于 2012-07-04T19:56:50.983 回答
1

事件参数对象的target属性包含真正被点击的元素。您可以将其与this（将包含相关.section元素）进行比较，并确定它是.section被点击的，还是其他的：

$(document).on('click', '.section', function(e){
    if (e.target == this) {
        $(this).nextAll('.hidden:first').slideToggle(500);
    }
});

我还分叉了你的小提琴来说明这种方法的实际应用。

于 2012-07-04T19:53:33.823 回答