javascript - 让 .show 一次只显示一个 div

Question

基本上，我使用 jQuery .show 来查看文章中隐藏的部分。这确实有效，但它是全局性的。这意味着当我按下其中一个“阅读更多”div 后的每个部分都会显示出来。

如何限制它，以便在按下任何“阅读更多”div 后，只有以下元素(在本例中是包含文本的隐藏部分)可见。

这是我当前用于此功能的脚本:

$('div.showrest').click(function(){

    $(".blog > .invis").show("fast");

});

$('div.showless').click(function(){

    $(".blog > .invis").hide(500);

});

这是我当前的 html 结构:

<article class="blog">

    <h3> Title </h3>

    <p class="blog"> 

    Short summary here.

    </p>

    <div class="showrest"> Read more </div>

<section class="invis" style="display:none;">

    <p class="blog">  

    Here is the rest of the article.

    </p>

    <div class="showless"> Hide text </div>

</section>

    <footer class="blog">

    Footer text.

    </footer>

</article>

如果我只有一篇文章想要此功能，那不会有问题，但我有很多文章，我希望在所有文章上都可以实现此功能，但单独。

我知道可以使用多个不同的 ID、类和脚本来完成此操作。 但我更希望它全部位于您在上面看到的同一个 .click 脚本中。

我一整天都在努力寻找问题的解决方案，但我似乎无法弄清楚。

Answer 1

有这样的事吗？多个部分和多个显示/隐藏？

$('div.showrest').click(function () {
    $(this).next().show("fast");
});
$('div.showless').click(function () {
    $(this).closest('section').hide(500);
});

DEMO