Question

我正在尝试创建一个更多的阅读切换（在单击按钮时）切换或扩展我的div（id：#portfolio）的高度以显示其中的所有文本，并在再次单击时折叠回来。

我的代码看起来非常好，但无法正常工作。单击时，它会运行动画，但会使div滑出可见性。

我的第二个问题是切换可能并不理想，因为我只能将div的高度增加到指定的高度。

我需要的是让div展开以显示它包含的所有文本（而不是特定的高度）。 ......（见附图）

＆＃13;

    $(document).ready(function(){
          $('button').click(function(){
             $("#portfolio").toggle(function(){
                $(this).animate({height:'360px'},500);
            },function(){
                $(this).animate({height:'50px'},500);
                });
                });
            });

＆＃13;

 .outer{border:1px solid #000000; width:300px; height:500px}
    #portfolio{border:1px solid red; width:250px; height:50px; margin:1.5em; overflow:hidden}

＆＃13;

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </head>
 <div class="outer">this is main box
   <div id="portfolio">This is inner box <br /> Lorem ipsum dolor sit amet consectetur adipiscing elit, habitant sapien laoreet mi taciti in nunc semper, netus neque pulvinar aliquet diam convallis. Facilisi lacus felis integer sollicitudin luctus laoreet leo natoque, placerat sodales non porttitor accumsan arcu aliquet, sagittis risus potenti himenaeos dui inceptos aliquam. Sociosqu euismod in augue quisque at quis tempor facilisi ad, cubilia vivamus accumsan suspendisse venenatis sagittis class volutpat elementum, vestibulum lacus habitasse libero felis luctus consequat mattis.
 </div>
 <button id="#expandbtn">Read more Read less</button>
</div>
</html>

＆＃13;

Answer 1

这是你正在寻找的吗？运行代码片段并告诉我它是否对您有所帮助

$(document).ready(function(){
  $('button').click(function(){
    if($('#portfolio').hasClass("readmore")) {
      $('#expandbtn').html('Read more');
      $('#portfolio').removeClass("readmore");
    } else {
      $('#expandbtn').html('Read less');
      $('#portfolio').addClass("readmore");
    }
  });
});

.outer{border:1px solid #000000; width:300px; height:500px}
#portfolio{border:1px solid red; width:250px; height:50px; margin:1.5em; overflow:hidden;}
.readmore{height: auto !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">this is main box
    <div id="portfolio">This is inner box <br /> Lorem ipsum dolor sit amet consectetur adipiscing elit, habitant sapien laoreet mi taciti in nunc semper, netus neque pulvinar aliquet diam convallis. Facilisi lacus felis integer sollicitudin luctus laoreet leo natoque, placerat sodales non porttitor accumsan arcu aliquet, sagittis risus potenti himenaeos dui inceptos aliquam. Sociosqu euismod in augue quisque at quis tempor facilisi ad, cubilia vivamus accumsan suspendisse venenatis sagittis class volutpat elementum, vestibulum lacus habitasse libero felis luctus consequat mattis.</div>
  <button id="expandbtn">Read more</button>
</div>

编辑：请注意，您在按钮ID处添加了“＃” 要更改内容，只需使用jQuery的html函数：documentation here 我编辑了我的代码，再次尝试我的代码片段！希望我帮助你

添加读取更多切换，增加按钮单击时div的高度

1 个答案: