滑动切换下一个元素

Question

我有许多带有“阅读更多”链接的 sn-ps，我正在寻找一种方法为所有 sn-ps 提供相同的选择器。我认为 jQuery 的下一个可以工作：

<script>
$(document).ready(function () {
    $(".readmore").click(function () {
        $(".readmore").next().slideToggle("slow", function () {
            $(window).scrollTop($(this).offset().top);
        });
    });
});
</script>

Visible text 1<a class="readmore">Read More 1</a><div class="more">Text to appear 1</div>
Visible text 2<a class="readmore">Read More 2</a><div class="more">Text to appear 2</div>
Visible text 3<a class="readmore">Read More 3</a><div class="more">Text to appear 3</div>

<style>.more {display:none}</style>

不幸的是，当单击一个“阅读更多”链接时，会出现所有 sn-ps 的文本，而不仅仅是下一个元素。上面的代码有什么问题？

这是JsFiddle。

Answer 1

你应该改变

$(".readmore").click(function () {
    $(".readmore").next()...

到

$(".readmore").click(function () {
    $(this).next()...

所以click()事件函数中的next()选择器只适用于当前点击的元素，而不是同时适用于类readmore的所有元素。