时间戳

首页 > 解决方案 > 使用 Javascript 阅读更多和阅读更少的网站页面内容

javascript - 使用 Javascript 阅读更多和阅读更少的网站页面内容

问题描述

预期输出：我希望阅读更多和阅读更少点击选项位于底部，所有内容包括段落和列表..（Codepen 在顶部显示阅读更多和阅读更少点击选项） 在此处输入图像描述 这是我尝试过的：HTML

<a href="#" class="show_hide" data-content="toggle-text">Read More</a>
<div class="content">Testing
  <ul>
    <li>first</li>
  </ul>
</div>

Javascript：

$(document).ready(function () {
  $(".content").hide();
  $(".show_hide").on("click", function () {
    var txt = $(".content").is(':visible') ? 'Read More' : 'Read Less';
    $(".show_hide").text(txt);
    $(this).next('.content').slideToggle(200);
  });
});

阅读更多和阅读更少实施的 Codepen 链接： 在此处输入链接描述

标签： javascripthtmljquerycss

解决方案

要将阅读更多链接移至底部并使其正常工作，请使用“prev”而不是“next”方法。

        $(document).ready(function () {
    $(".content").hide();
    $(".show_hide").on("click", function () {
        var txt = $(".content").is(':visible') ? 'Read More' : 'Read Less';
        $(".show_hide").text(txt);
        $(this).prev('.content').slideToggle(200);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">Testing
<ul>
<li>first</li>
</ul>

</div>
<a href="#" class="show_hide" data-content="toggle-text">Read More</a>

推荐阅读