Question

我在页面上有多个这些，我想只在每个区域内滑动“注释框”（即：它找到的第一个）。

<div class="comments">
<a style="cursor:pointer" onclick="jQuery('.comments-box').slideToggle();">comments</a></span>
        <div class="add-comment">add</div>
        <div class="response-form"></div>
        <div class="comments-box">
         a bunch of comments
        </div>
</div>

然而，这显然会切换每个“评论框”。

我试过onclick="jQuery($(this).next('.comments-box')).slideToggle();"但没有运气。

Answer 1

更改标记，删除内联javascript，并向锚点添加href：

<div class="comments">
    <span><a href="#">comments</a></span>
    <div class="add-comment">add</div>
    <div class="response-form"></div>
    <div class="comments-box">
         a bunch of comments
    </div>
</div>

然后执行此操作以使每个评论框上下滑动：

$(function() {
    $('.comments a').on('click', function(e) {
        e.preventDefault();
        $(this).closest('.comments').find('.comments-box').slideToggle();
    });
});

修改

内联：

<a onclick="jQuery(this).closest('.comments').find('.comments-box').slideToggle();">comments</a>

Answer 2

试试这个'

$('.comments a').on("click",function(){
        $(this).parent().find('.comments-box').slideToggle();

        });

FIDDLE Demo

Answer 3

您也可以使用siblings()。试试这个

$(function() {
    $('.comments a').on('click', function(e) {
        e.preventDefault();
        $(this).parent().siblings('.comments-box').slideToggle();
    });
});

JSfiddle demo

单击下一步使用幻灯片

3 个答案: