Question

最初当我点击我的div时，标题会向上滑动，但它会影响所有其他具有相同类别的div。我只是想让它影响被点击的div。所以我在下面尝试了这个选项，但它根本不起作用！任何帮助，将不胜感激。谢谢！

$(document).ready(function() {
    $(".bubble").click(function() {
        $(this).find('.slide-up').slideToggle(1000);              
    });

});

<div class="property">  
<div class="left-column">       
    <img src="<?php bloginfo('template_directory'); ?>/images/test-image.jpg" width="670px" height="450px" />       
    <div class="bubble"></div>      
    <div class="slide-up"><h1>CHARM? LOCATION? AWESOME? CHECK, CHECK AND CHECK</h1></div>   
</div>

Answer 1

尝试：

$(document).ready(function() {
    $(".bubble").click(function() {
        $(this).next('.slide-up').slideToggle(1000);              
    });

});

Answer 2

您需要使用.next ，因为slide-up div位于bubble旁边而不在其中

$(".bubble").click(function() {
        $(this).next('.slide-up').slideToggle(1000);              
});

Answer 3

使用该活动获得您想要的活动。

$(".bubble").click(function(e) {
    $(e.target).find('.slide-up').slideToggle(1000);              
});

Answer 4

如果你有很多'.bubble'元素; $('.bubbles')返回一个元素数组，当触发click事件时，将执行所有元素。

您需要做的是迭代每个元素并使用以下命令分配它自己的点击事件：

$(".bubble").each(function(){
    $(this).click(function() {
        $(this).find('.slide-up').slideToggle(1000);              
    })
});

我在这里为你创建了一个工作示例 - http://jsfiddle.net/CGWGreen/acGLX/。干杯GW

当我点击我的div时，我不希望它影响所有具有相同类的div？

4 个答案: