Jquery 显示第一段，然后单击以显示其余部分_Jquery

Jquery 显示第一段，然后单击以显示其余部分

jquery

Jquery 显示第一段，然后单击以显示其余部分,jquery,Jquery,我需要能够显示每个列的第一段，然后单击“查找更多”以显示该列的其他段落 <div class="row"> <div class="col"> <h2>About Us</h2> <img src="images/aboutus.jpg"> <p>Pellentesque habitant morbi tris

我需要能够显示每个列的第一段，然后单击“查找更多”以显示该列的其他段落

    <div class="row">
            <div class="col">
              <h2>About Us</h2>
              <img src="images/aboutus.jpg">
              <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
              <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
              <div class="sub-content-btn">Find out more</div>
            </div>
            <div class="col">
              <h2>About Us</h2>
              <img src="images/aboutus.jpg">
              <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
              <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
              <div class="sub-content-btn">Find out more</div>
            </div>
            <div class="col">
              <h2>About Us</h2>
              <img src="images/aboutus.jpg">
              <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
              <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
              <div class="sub-content-btn">Find out more</div>
            </div>
          </div>

试试这个

$('div.col').each(function() {
    $(this).find('p:eq(0)').show();
});

$('.sub-content-btn').on('click', function() {
    $(this).prev('p').show();
});

您可以这样做，使用CSS中的可见性属性隐藏附加段落，并使用JS中的show（）和hide（）函数更改此属性。我提供了一个回调示例。。。你必须把它放在一个事件处理程序中，比如按钮点击之类的

<head>
<style type="text/css">
    p.more {
        visibility: hidden;
    }
</style>

<script type="text/javascript">
// on click...
function some_callback(e) {
    $('p.more').show();
}
</script>
</head>

<body>
...
<p class="first">first paragraph is visible</p>
<p class="more">this paragraph is hidden</p>
<p class="more">you have to click to see these other paragraphs</p>
</body>


p、 更多{
可见性：隐藏；
}
//单击。。。
函数调用（e）{
$（'p.more'）.show（）；
}
...
第一段可见
这一段是隐藏的
您必须单击以查看这些其他段落

这样如何（保持当前标记不变）-

看

基于在额外段落中添加“更多”类-

$('.sub-content-btn').click(function() {
    $(this).parent('.col').find('.more').toggle();
})

如果每一列有超过一个额外段落，会发生什么？你在原来的帖子中没有这样说或这样问。你是在要求我们解决一些我们看不见或预料不到的问题吗；我现在编辑了这篇文章，你能帮忙吗？答案是@ktm5124就是你想要的。在额外的段落中添加类并切换这些类。这将是动态内容。目前，它显示了段落，但不再隐藏它们。

$('.sub-content-btn').click(function() {
    $(this).parent('.col').find('p:nth-child(4)').toggle();
});

$('.sub-content-btn').click(function() {
    $(this).parent('.col').find('.more').toggle();
})