javascript - 当我的列表无序时，“阅读更多”不起作用

当我在容器中有无序的段落文本列表时，read more / readless不会在UL列表之前隐藏任何文本

https://codepen.io/tickatop/pen/NZavXg

差点让我发疯

 <div class= "col2">
<p class="lead" height="50">>
<strong>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem cum quisquam praesentium incidunt, ad, placeat debitis voluptatum, quidem quo velit architecto eligendi </strong>voluptate officia soluta explicabo aliquam facilis illo temporibus sint eaque repudiandae quis ducimus! Placeat exercitationem ex voluptate ratione aut facere cupiditate sunt. Officiis veniam, inventore dolore. Soluta temporibus, veritatis labore optio enim consectetur ipsa?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti sequi non qui, quas, quod ad vel facilis consectetur sint, culpa eum. Maiores, maxime, quisquam. Assumenda error sapiente numquam quibusdam praesentium perspiciatis minima, architecto maiores ipsa, <ul>
<li>ndskdsmd</li>
<li>sdkdnskdskds</li>
<li>dskdnskdnskdsnk</li>
</ul>corporis, soluta dolor magnam vel id quis eveniet recusandae asperiores totam sit eligendi commodi. Nam nemo, dicta. Ut asperiores commodi sint debitis laborum harum facilis, dolore obcaecati vel adipisci dolorem modi quas eos deserunt quae sed explicabo magnam reiciendis dolores odit ex nulla a! Impedit nulla unde, hic, commodi explicabo omnis nisi sed, recusandae quam possimus, magnam qui. Ex non laborum libero tempore similique, id.
Perspiciatis provident accusamus esse possimus, eveniet corrupti exercitationem magni soluta consequuntur nobis! Sequi molestiae repellat optio quaerat tempora veritatis illum voluptatem pariatur reiciendis? Repudiandae fugiat dignissimos, dolore laborum laudantium tempora odit, quo, labore animi eos nesciunt. Dicta nam voluptatum eaque suscipit nihil accusamus consequuntur.  </p>
<button class="more more-lead">Read more...</button>

</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

最佳答案

我不确定这是否有用，但是它具有您希望的功能，因此至少是一种替代方法。它也适用于单个页面上任意数量的阅读更多部分。

请注意，阅读更多按钮具有类.more和属性for，该属性将其链接到为其设置高度的元素。

希望这可以帮助

演示版

// Hide on load via jquery to avoid issues where JS is disabled
// Cycle through each more button
$(".more").each(function() {

  // Find ID and store element
  id = $(this).attr("for");
  elem = $("#" + id);

  // Set height from inline property
  elem.css("height", elem.attr("height")).css("overflow", "hidden");



});

// Add click event to more button
$(".more").click(function() {

  // Find ID and store element
  id = $(this).attr("for");
  elem = $("#" + id);

  // Toggle expanded class
  // Could check for inline property being auto / set and adjust if you want to avoid an !important CSS rule
  elem.toggleClass("expanded");

  // Toggle text of buttons
  if ($(this).text() == "Read more...") {
    $(this).text("Read less...");

  } else {
    $(this).text("Read more...");
  }

})

.expanded {
  height: auto !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col2">
  <div id="lead" height="50">

    <p>
      <strong>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem cum quisquam praesentium incidunt, ad, placeat debitis voluptatum, quidem quo velit architecto eligendi </strong>voluptate officia soluta explicabo aliquam facilis illo temporibus
      sint eaque repudiandae quis ducimus! Placeat exercitationem ex voluptate ratione aut facere cupiditate sunt. Officiis veniam, inventore dolore. Soluta temporibus, veritatis labore optio enim consectetur ipsa? Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Corrupti sequi non qui, quas, quod ad vel facilis consectetur sint, culpa eum. Maiores, maxime, quisquam. Assumenda error sapiente numquam quibusdam praesentium perspiciatis minima, architecto maiores ipsa,
    </p>
    <ul>
      <li>ndskdsmd</li>
      <li>sdkdnskdskds</li>
      <li>dskdnskdnskdsnk</li>
    </ul>

    <p>corporis, soluta dolor magnam vel id quis eveniet recusandae asperiores totam sit eligendi commodi. Nam nemo, dicta. Ut asperiores commodi sint debitis laborum harum facilis, dolore obcaecati vel adipisci dolorem modi quas eos deserunt quae sed explicabo
      magnam reiciendis dolores odit ex nulla a! Impedit nulla unde, hic, commodi explicabo omnis nisi sed, recusandae quam possimus, magnam qui. Ex non laborum libero tempore similique, id. Perspiciatis provident accusamus esse possimus, eveniet corrupti
      exercitationem magni soluta consequuntur nobis! Sequi molestiae repellat optio quaerat tempora veritatis illum voluptatem pariatur reiciendis? Repudiandae fugiat dignissimos, dolore laborum laudantium tempora odit, quo, labore animi eos nesciunt.
      Dicta nam voluptatum eaque suscipit nihil accusamus consequuntur. </p>
  </div>
  <button class="more" for="lead">Read more...</button>

</div>

<div class="col2">
  <div id="second" height="50">

    <p>
      <strong>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem cum quisquam praesentium incidunt, ad, placeat debitis voluptatum, quidem quo velit architecto eligendi </strong>voluptate officia soluta explicabo aliquam facilis illo temporibus
      sint eaque repudiandae quis ducimus! Placeat exercitationem ex voluptate ratione aut facere cupiditate sunt. Officiis veniam, inventore dolore. Soluta temporibus, veritatis labore optio enim consectetur ipsa? Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Corrupti sequi non qui, quas, quod ad vel facilis consectetur sint, culpa eum. Maiores, maxime, quisquam. Assumenda error sapiente numquam quibusdam praesentium perspiciatis minima, architecto maiores ipsa,
    </p>
    <ul>
      <li>ndskdsmd</li>
      <li>sdkdnskdskds</li>
      <li>dskdnskdnskdsnk</li>
    </ul>

    <p>corporis, soluta dolor magnam vel id quis eveniet recusandae asperiores totam sit eligendi commodi. Nam nemo, dicta. Ut asperiores commodi sint debitis laborum harum facilis, dolore obcaecati vel adipisci dolorem modi quas eos deserunt quae sed explicabo
      magnam reiciendis dolores odit ex nulla a! Impedit nulla unde, hic, commodi explicabo omnis nisi sed, recusandae quam possimus, magnam qui. Ex non laborum libero tempore similique, id. Perspiciatis provident accusamus esse possimus, eveniet corrupti
      exercitationem magni soluta consequuntur nobis! Sequi molestiae repellat optio quaerat tempora veritatis illum voluptatem pariatur reiciendis? Repudiandae fugiat dignissimos, dolore laborum laudantium tempora odit, quo, labore animi eos nesciunt.
      Dicta nam voluptatum eaque suscipit nihil accusamus consequuntur. </p>
  </div>
  <button class="more" for="second">Read more...</button>

</div>

关于javascript - 当我的列表无序时，“阅读更多”不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56776034/