读取动画高度切换 More/Less

Question

我遇到了很多麻烦。我需要更改这些 Read More/Less 按钮，以便在文本展开并再次展开时将 "Read More" 更改为 "Read Less"。我试过使用 readmore.js 但我无法让它工作。所以我正在努力做我自己的事情。但即使这样也行不通，因为我不太擅长 Javascript。这是我得到的。我知道这很糟糕。感谢您提供的任何帮助。我还需要使该按钮仅适用于其上方的 div。不是全部。

HTML

<html>

  <head>
    <title>jQuery Read More/Less Toggle</title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript"> 
        $(document).ready(function(){
            $(".btn1").click(function(){
                $(".more").animate({height: "290"});
        });

            $(".btn2").click(function(){
                $(".more").animate({height: "90px"});
            });
        });
    </script>
    </head>

  <body>
    <div class="container">
        <div class="more" id="more1">
          Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.  Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.  Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
        </div>
        <div class="btn1" for="more1">
            <p class="btn_text">Read More &#8897</p>
            ______________________________________________
        </div>
        <div class="btn2" for="more1">
            <p class="btn_text">Read Less &#8896</p>
            ______________________________________________
        </div>
    </div>
    <div class="container">
        <div class="more">
          Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.  Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.  Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
        </div>
        <div class="btn">
            <p class="btn_text">Read More &#8897</p>
            ______________________________________________
        </div>
        <div class="btn2" for="more1">
            <p class="btn_text">Read Less &#8896</p>
            ______________________________________________
        </div>
    </div>
  </body>

</html>

CSS

.more {
    width: 600px;
    overflow: hidden;
    height: 90px;
}

.btn1 {
    cursor: pointer;
    width: 500px;
}

.btn2 {
    cursor: pointer;
    width: 500px;
}
.btn_text {
    margin-bottom: -10px;
}

Answer 1

尝试使用 .data() 到 set/get 展开状态，并使用 .html() 切换文本，

$(document).ready(function () {
    $('.btn').data("expanded",false);
    $(".btn").click(function () {
        var val = $(this).data('expanded');
        $(this).data('expanded', !val);
        $('p', this).html(val ? "Read More &#8897" : "Read Less &#8896");
        $(".more",$(this).closest('.container')).animate({
            height: val ? '90' : "290"
        });
    });
});

读取动画高度切换 More/Less

Animate Height Toggle for Read More/Less

html

javascript

jquery

slidetoggle

jquery-animate

DEMO