javascript - Slidetoggle next 使用点击

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

You can also use siblings(). Try this

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

JSfiddle demo

Answer 2

尝试这个'

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

        });

小提琴演示

Answer 3

更改标记，删除内联 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>