Home / Questions / 182950
Accepted
Richard
Asked: 2020-07-21 19:43:30 +0800 CST 2020-07-21 19:43:30 +0800 CST

如何实现阅读更多的效果？

  • 772

我有一些我不想完全显示的文本，只是其中的一部分，并且可以选择使用按钮或其他方式“阅读更多”。我尝试以下方法，但由于某种原因它对我不起作用：

$(document).ready(function() {
  $(".more").toggle(function() {
    $(this).text("Leer menos...").siblings(".complete").show();
  }, function() {
    $(this).text("Leer mas...").siblings(".complete").hide();
  });
});
.more {
  cursor: pointer;
  background-color: #ccf;
}

.complete {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="text-comment">
  <p class="text-par">"Vision"</p>
  <p class="text-name">
    <span class="summary">
      <p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum
id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his
diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p>
    </span>
    <span class="complete">
      <p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p>
      <p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper.
Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit
cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p>
    </span>
    <span class="more">Leer mas...</span>
  </p>
</div>

如果它可以只用 JavaScript 来完成，那就更好了，但我发现的所有例子都是用 jQuery 完成的。

javascript

5 Answers

  1. Best Answer

    代码对您不起作用的问题是因为您使用toggle. 该方法通过传递两个参数来隐藏/显示元素：持续时间和动画完成时要执行的函数。当您尝试运行时，它相当于从toggle1.8 版开始弃用并从 1.9 版开始删除的事件。这是因为您可能依赖于过时的教程或页面。

    一种解决方案是监听 click 事件并执行togglede #complete（同时更改按钮文本）。像这样的东西：

    $(document).ready(function() {
  $(".more").on("click", function() {
    // cambiar la visibilidad de complete
    $(".complete").toggle();

    // cambiar el texto del boton dependiendo del texto actual
    if ($(this).text() == "Leer menos...") {
      $(this).text("Leer mas...");
    } else {
      $(this).text("Leer menos...");
    }
  });
});
    .more {
  cursor: pointer;
  background-color: #ccf;
}

.complete {
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="text-comment">
  <p class="text-par">"Vision"</p>
  <p class="text-name">
    <span class="summary">
      <p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum
id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his
diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p>
    </span>
    <span class="complete">
      <p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p>
      <p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper.
Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit
cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p>
    </span>
    <span class="more">Leer mas...</span>
  </p>
</div>

    • 7

  2. 使用 JavaScript，根据您的内容HTML，一种选择是仅访问previousElementSibling以便从此属性中，您可以使用classListtoggle属性添加和删除一个类

    为此，在创建一个show用于toggle

    let toggle = document.querySelector('.more');
toggle.addEventListener('click',function(){
  this.previousElementSibling.classList.toggle('show');
  this.innerText = this.innerText==="Leer mas..." ? "Leer menos..." : "Leer mas...";
});
    .more {
    cursor: pointer;
    background-color: #ccf;
}

.complete {
    display: none;
}

.show{
  display: block;
}
    <div class="text-comment">
  <p class="text-par">"Vision"</p>
  <p class="text-name">
    <div class="summary">
      <p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum
        id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his
        diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p>
    </div>
    <div class="complete">
      <p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p>
      <p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper.
        Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit
        cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p>
    </div>
    <span class="more">Leer mas...</span>
  </p>

    • 4

  3. 无需 JavaScript 或 jQuery 就可以在 HTML 中找到与您正在寻找的内容相近的东西。<details>和标签<summary>正是为了做一些类似于你想要的事情：一个在点击时显示并在再次点击时隐藏的手风琴/标签：

    <div class="text-comment">
  <p class="text-par">"Vision"</p>
  <p class="text-name">
    <span class="summary">
      <p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum
id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his
diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p>
    </span>
    <details>
      <summary>Leer mas...</summary>
      <p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p>
      <p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper.
Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit
cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p>
    </details>
  </p>
</div>

    该解决方案存在一些问题：

    1. 并非所有浏览器都支持它（特别是 IE/Edge ......虽然它似乎要进入 Edge，但最终它没有，他们已经“研究”了一年）。

    2. 即使在支持它的浏览器中，它也不是很普遍（您无法配置文本将如何显示，并且可用的少数配置是使用浏览器前缀）。

    尽管如此，CSS 可以用于一些样式，并且知道open在文本打开时添加了属性，您可以使用::before/::after来更改文本（但您仍然无法将它放在它后面，在至少现在）。

    details summary::after {
  content: "Leer mas..."
}

details[open] summary::after {
  content: "Leer menos..."
}
    <div class="text-comment">
  <p class="text-par">"Vision"</p>
  <p class="text-name">
    <span class="summary">
      <p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum
id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his
diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p>
    </span>
    <details>
      <summary></summary>
      <p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p>
      <p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper.
Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit
cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p>
    </details>
  </p>
</div>

    • 4

  4. 另一种方法是添加类以使其看起来完整并缩短它。

    要使用 css 缩短段落，您可以使用white-space: nowrap;

    var condicional = document.getElementById('more');

document.getElementById('more').addEventListener('click', verCompleto)

function verCompleto() {
  var texto = condicional.innerHTML;

  document.getElementById('largo').classList.toggle('textoCompleto');

  texto == 'Leer mas...' ? texto = "Leer menos..." : texto = "Leer mas...";
  condicional.innerHTML = texto;
}
    .more {
  cursor: pointer;
  background-color: #ccf;
}

.text-comment {
  overflow-wrap: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 260px;
  height: 10.2em;
  white-space: nowrap;
}

.textoCompleto {
  height: auto;
  width: auto;
  white-space: normal;
}
    <div id="largo" class="text-comment">
  <p class="text-name">
    <span class="summary">
      <p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum
id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his
diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p>
    </span>

    <span id="more">Leer mas...</span>
  </p>
</div>

    • 3

  5. 仅使用 HTML+CSScheckbox和同级选择器的替代方法。

    .more {
  cursor: pointer;
  background-color: #ccf;
}

.complete {
  display: none;
}

input.showmore {
  display: none;
}

input.showmore~label.more span.menos {
  display: none;
}

input.showmore:checked+.complete {
  display: block;
}

input.showmore:checked~label.more span.mas {
  display: none;
}

input.showmore:checked~label.more span.menos {
  display: inline;
}
    <div class="text-comment">
  <p class="text-par">"Vision"</p>
  <p class="text-name">
    <span class="summary">
      <p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum
id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his
diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p>
    </span>
    <input id="showmore_1" type="checkbox" class="showmore">
    <span class="complete">
      <p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p>
      <p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper.
Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit
cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p>
    </span>
    <label for="showmore_1" class="more">Leer <span class="mas">mas</span> <span class="menos">menos</span> ...</label>
  </p>
</div>

<div class="text-comment">
  <p class="text-par">"Thanos"</p>
  <p class="text-name">
    <span class="summary">
      <p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum
id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his
diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p>
    </span>
    <input id="showmore_2" type="checkbox" class="showmore">
    <span class="complete">
      <p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p>
      <p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper.
Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit
cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p>
    </span>
    <label for="showmore_2" class="more">Leer <span class="mas">mas</span> <span class="menos">menos</span> ...</label>
  </p>
</div>

    • 1