獲取.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

Answer 2

您可以使用.closest選擇器執行此操作。

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

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

});

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

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

});

Answer 3

像這樣更改您的jquery代碼：

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

$('div.showless').click(function(){
    $(this).parent().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');
});