提问者:小点点

使用Javascript将较大的内容缩减为较小的内容


我尝试的内容:HTML

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

JavaScript:

    <script>
    $(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>

Codepen链接:在此处输入链接描述


共1个答案

匿名用户

如果只有一个,那么就把头分开。

<div class="Header">Testing</div>
  <div class="content">
    <ul>
    <li>first</li>
    </ul>
  </div>

但是如果有多个类似的项目,那么您可以使用单击的按钮的上下文,然后围绕它进行修改。 另外,由于您已经在使用jQuery,您可以在Accordion中查看多个类似的条目。