3

我有一个用于显示新闻文章的页面。

<article>

<h4>News Article One</h4>
<h5>25th December 2012</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at purus at dui iaculis adipiscing. Maecenas viverra arcu nec libero accumsan commodo convallis purus sagittis. Etiam fermentum commodo libero sit amet tincidunt. Fusce eu dolor fermentum risus ornare imperdiet rhoncus eu ipsum. Etiam eleifend tempor lacus. Praesent blandit dui at nulla laoreet vehicula. In rhoncus ornare leo venenatis interdum. Vestibulum hendrerit aliquet lectus. Nam ullamcorper ullamcorper sem, a congue massa accumsan vitae.</p>

<p>Etiam ullamcorper mattis lectus, nec mollis odio condimentum vel. Nunc quam ligula, laoreet eu mollis posuere, ultrices varius diam. Ut sapien quam, mattis consequat adipiscing vel, posuere non lacus. Donec id mauris purus. Nam iaculis aliquam pellentesque. Vestibulum eleifend nulla eget lacus aliquam rutrum. Suspendisse adipiscing vestibulum lorem, mattis hendrerit odio faucibus vel.</p>

</article>

<article>

<h4>News Article Two</h4>
<h5>25th January 2012</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at purus at dui iaculis adipiscing. Maecenas viverra arcu nec libero accumsan commodo convallis purus sagittis. Etiam fermentum commodo libero sit amet tincidunt. Fusce eu dolor fermentum risus ornare imperdiet rhoncus eu ipsum. Etiam eleifend tempor lacus. Praesent blandit dui at nulla laoreet vehicula. In rhoncus ornare leo venenatis interdum. Vestibulum hendrerit aliquet lectus. Nam ullamcorper ullamcorper sem, a congue massa accumsan vitae.</p>

<p>Etiam ullamcorper mattis lectus, nec mollis odio condimentum vel. Nunc quam ligula, laoreet eu mollis posuere, ultrices varius diam. Ut sapien quam, mattis consequat adipiscing vel, posuere non lacus. Donec id mauris purus. Nam iaculis aliquam pellentesque. Vestibulum eleifend nulla eget lacus aliquam rutrum. Suspendisse adipiscing vestibulum lorem, mattis hendrerit odio faucibus vel.</p>

</article>

我希望只显示每篇文章的第一段，并让其余段落（仅针对该文章）在单击“阅读更多”链接时可见。

目前我正在使用这个：

<script>
$(document).ready(function() {
 $('article p').eq(1).hide();
 $('a.more').click(function() {
  $('article p').eq(1).show();
  $(this).hide();
  return false;
 });
});
</script>

然而，上述内容仅适用于第一篇文章，第一段，我希望它适用于所有文章，第一段。

感谢所有时间和帮助。

谢谢

4

5 回答 5

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

这是一个有效的 jsFiddle：http: //jsfiddle.net/fdp5L/1/

以下是每篇文章的“扩展链接”示例：http: //jsfiddle.net/fdp5L/5/

html:

<article>
    <p>first 1</p>
    <p>second 1</p>
    <p>third 1</p>
    <p>fourth 1</p>
    <div class="more">more...</div>
</article>
<article>
    <p>first 2</p>
    <p>second 2</p>
    <p>third 2</p>
    <p>fourth 2</p>
    <div class="more">more...</div>
</article>

javascript:

$('article').each(function(){ $(this).find('p:not(:first)').hide()});
$('.more').on('click', function(){
    $(this).hide().closest('article').find('p').show();    
})
于 2012-05-07T18:16:05.210 回答
1 
$('article').each(function() {
 $('p:eq(1)', this).hide();
});

或者

$('p:eq(1)', $('article')).hide();

或者

$('p:gt(0)', $('article')).hide();

或者

$('p:not(:first)', $('article')).hide();

并在.more点击时显示

$('a.more').click(function() {
  $('p:eq(1)', $('article')).show();
  $(this).hide();
  return false;
});

如果a.more是直接孩子，article那么您可以尝试：

$('a.more').click(function(e) {
  e.preventDefault();
  $('p:eq(1)', $(this).parent()).show();
  $(this).hide();
});

或者如果没有，请尝试：

 $('a.more').click(function(e) {
    e.preventDefault();  
    $(this).closest("article").find("p:eq(1)").show();
    item.hide();
 });
于 2012-05-07T18:13:50.950 回答
1

一个简单的查询：

$(function() {


  $("article").each(function() {

    // hide all second paragraphs
    $(this).find("p:not(:first)").hide();
    // add read more links
    $(this).find("p:visible").append("<p><a href='#' class='read-more'>read more</a></p>"); 

  });

  $(".read-more").click(function() {

    // show the hided paragraph
    $(this).closest("article").find("p").fadeIn();
    // hide the read more link
    $(this).hide();

  });

});

JsBin 中的实例

于 2012-05-07T18:17:41.457 回答
1

尝试，

$('p:eq(1)', $('article')).hide();

完整代码：

$(document).ready(function() {
    $('p:eq(1)', $('article')).hide();

    $('a.more').click(function() {
        $('p:eq(1)', $('article')).show();
        $(this).hide();
        return false;
    });
});

演示

于 2012-05-07T18:22:39.067 回答
0

我猜你想显示除第一个以外的所有 Para，并在单击更多按钮/链接时显示剩余的。这会做

$(document).ready(function() {
    $('article p').hide();
    var articles=$('article');
    $.each(articles,function(){
        $(this).find("p").first().show();
    });

 $('a.more').click(function(e) {
    e.preventDefault();  
    var item=$(this);
    item.closest("article").find("p").show();
    item.hide();
   return false;
 });
});

more假设您在文章元素中有一个带有类的标签。

工作演示http://jsfiddle.net/jtQ5b/22/

于 2012-05-07T18:28:14.260 回答