Question

我遇到很多麻烦。我需要更改这些“读取更多/更少”按钮，以便在文本展开并再次返回时，“读取更多”字样变为“读取更少”。我尝试过使用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()设置/获取展开状态，并使用.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"
        });
    });
});

Animate Height Toggle for Read More / Less

1 个答案:

DEMO