Question

任何人都知道是否可以使用纯子元素自动生成更多链接和标签？如果我的术语已经关闭，请道歉。

例如，我的内容如下所示：

<div class="container">
    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>

理想情况下，我喜欢在第一个<p>之后自动剪辑所有内容，在第一个p结束之前显示内联阅读更多链接，并让更多链接显示或隐藏其中的任何其他元素div.container。

感觉很简单，但我确定不是。有什么想法吗？

Answer 1

$('.container p:first-child').append('<a>Read More</a>');
$('.container p:not(:first-child)').hide();


$('.container').on("click", "a", function() {
   $('.container p:not(:first-child)').show();
});

Answer 2

尽管所有事件处理都需要在javascript中完成，但这会将尽可能多的逻辑卸载到CSS中。我包含了两个容器块，以证明它可以单独处理每个容器块，并作为一个额外的褶边切换“读取更多”链接文本以匹配其功能。

$('.container').each(function() {
  var container = this;
  $('<a href="#">Read more</a>')
    .appendTo($(container).find('p:first'))
    .click(function() {
      $(container).toggleClass('readmore');
      this.innerHTML = (this.innerHTML === 'Read more') ? "Read less" : 'Read more';
  });
});

.container p:not(:first-child) {
  display: none
}

.container.readmore p:not(:first-child) {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
  <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>

<div class="container">
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
  <p>Lorem ipsum dolor sit etcetera.</p>
</div>

使用子选择器自动读取更多内容

2 个答案: