演示

Question

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

几乎让我发疯了

 <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>

Answer 1

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

请注意，“更多”按钮具有类.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>

取消订单后，Readmore不起作用

1 个答案:

演示