-1

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

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

3 回答 3

1

尝试这个

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

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

检查小提琴

于 2012-12-04T16:51:31.100 回答
0

这个怎么样（保持你当前的标记完好无损） -

$('.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();
})
于 2012-12-04T17:06:15.110 回答
0

您可以这样做，使用 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>
于 2012-12-04T16:56:46.780 回答