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);
});

演示

Answer 2

像这样更改您的 jquery 代码：

$('div.showrest').click(function(){
    $(this).next().show("fast");
});

$('div.showless').click(function(){
    $(this).parent().hide(500);
});

这样，您只需触发显示并隐藏相关元素。

Answer 3

您可以使用.closest选择器来执行此操作。

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

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

});

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

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

});

Answer 4

使用这个和父母

$('div.showrest').click(function(){
    $(this).parents('article').find('.invis').show('fast');
});

$('div.showless').click(function(){
    $(this).parents('article').find('.invis').hide('fast');
});