显示已单击的隐藏最近元素

Question

http://jsfiddle.net/KevinOrin/xycCx/1/

jQuery('.happening-main-text .readmore').click(function() {                  
    jQuery('.divmore').toggle('slow');       
    return false;                                       
});

我试图让每个链接只显示/隐藏一个被点击的链接。如何修改JS才能做到这一点。我试过('.happening-main-text').closest('divmore')，但也不起作用。

<div class="happening-main-text">
    <p>part of text goes here part of text <a href="#" class="readmore">show/hide</a>

    </p>
    <div class="divmore">
        <p>more test from hidden1</p>
    </div>
</div>
<div class="happening-main-text">
    <p>part of text goes here part of text <a href="#" class="readmore">show/hide</a>

    </p>
    <div class="divmore">
        <p>more test from hidden</p>
    </div>
</div>
<div class="happening-main-text">
    <p>part of text goes here part of text <a href="#" class="readmore">show/hide</a>

    </p>
    <div class="divmore">
        <p>more test from hidden2</p>
    </div>
</div>

Answer 1

如果您保持HTML的当前格式，则以下代码应该可以工作

jQuery('.happening-main-text .readmore').click(function() {                  
    jQuery(this).parent().next().toggle('slow');       
    return false;                                       
});                                                   

Answer 2

通过查看您的小提琴中的DOM，这可能是解决它的一种方法：

jQuery('.happening-main-text .readmore').click(function() {                  
    jQuery(this).parent().next().toggle('slow');
    return false;
}

看看文档中的$.next和$.parent。此外，您可能会注意到动画是“跳跃”的，这是因为p (related SO question)上的边距。去掉边距就能解决这个问题。例如：

p { margin: 0; }

Answer 3

凯文，试着这样：

$('.happening-main-text').each(function() {
    $divmore = $(this).find(".divmore");
    $readmore = $(this).find(".readmore");
    $readmore.bind("click", {target: $divmore}, function(e) {
        e.data.target.toggle();
    });
});

由于html的结构，您需要向每次单击回调传递一个不同的目标。稍微重构一下DOM，您就可以使用$().siblings或其他更简单的解决方案。无论如何，您可以在这里查看您的小提琴的工作版本：http://jsfiddle.net/xycCx/6/