Question

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

如何限制它，以便在按下任何“read more”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

使用此＆amp;父母

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

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

让.show只显示一个div

4 个答案: