Question

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

    <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>

这是到目前为止使用的jQuery：

$('.col').each(function() { 
    $(this).find('p:not(:first)').hide();
  });

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

Answer 1

试试这个

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

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

<强> Check Fiddle

Answer 2

你会做这样的事情，使用CSS中的visibility属性隐藏你的附加段落，并使用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>

Answer 3

这个怎么样（让你当前的标记保持不变） -

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

请参阅http://jsfiddle.net/CXkqn/

基于将“更多”类添加到额外段落 -

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

显示第一段然后单击以显示休息

3 个答案: