單擊即可使用Slidetoggle

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示范

Answer 3

您也可以使用siblings() 。 嘗試這個

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

JSfiddle演示