javascript - 动态加载 html 并尝试正确显示 i

Question

这个想法是让用户点击显示更多(“Читај више”)并显示完整文章，但随后的挑战是计算容器的高度。 所以我使用 display:table 和 display:table-row 这样我就可以避免计算那个高度。现在出现另一个问题，那就是宽度，因为我认为 display:table 没有宽度。那么现在如何？

请原谅我张贴了太多的CSS，我懒得删除它。但是 javascript 就在那里，你可以看到我努力添加 div 来包装文章，试图解决这个问题，但无济于事。

因此，如果需要的话，我再次希望 PRE 标签带有水平滚动条。

注意:

.main-style{
     max-width:800px;
...

解决方案可以在 css 或 javascript 中。

          var $el, $ps, $up, totalHeight;
            
            window.onload = function(){
              $("pre").wrap("<div></div>");
              $("article").wrap('<div style="overflow:auto"></div>');
            };
            
            $(".sidebar-box .button").click(function() {
            
              $p  = $(this).parent();
              $up = $p.parent();
            
              $up.css({"display":"table"});
            
              $up.children('*').css({"display":"table-row"});
            
              // fade out read-more
              $p.fadeOut();
            
              // prevent jump-down
              return false;
            });

         body {
         font-size: 16px!important;
         }
         @media screen and (min-width: 600px) {
         body {
         font-size: calc(16px + (100vw - 600px) / 600)!important;
         }
         }
         @media screen and (min-width: 1200px) {
         body {
         font-size: 18px!important;
         }
         }
         h1 {
         font-size: 32px!important;
         }
         @media screen and (min-width: 600px) {
         h1 {
         font-size: calc(32px + 4 * (100vw - 600px) / 600)!important;
         }
         }
         @media screen and (min-width: 1200px) {
         h1 {
         font-size: 36px!important;
         }
         }
         h2 {
         font-size: 24px!important;
         }
         @media screen and (min-width: 600px) {
         h2 {
         font-size: calc(24px + 4 * (100vw - 600px) / 600)!important;
         }
         }
         @media screen and (min-width: 1200px) {
         h2 {
         font-size: 28px!important;
         }
         }
         h3 {
         font-size: 18px!important;
         }
         @media screen and (min-width: 600px) {
         h3 {
         font-size: calc(18px + 4 * (100vw - 600px) / 600)!important;
         }
         }
         @media screen and (min-width: 1200px) {
         h3 {
         font-size: 22px!important;
         }
         }
         h4 {
         font-size: 15px!important;
         }
         @media screen and (min-width: 600px) {
         h4 {
         font-size: calc(15px + 4 * (100vw - 600px) / 600)!important;
         }
         }
         @media screen and (min-width: 1200px) {
         h4 {
         font-size: 19px!important;
         }
         }
         html, body {
         height: 100%!important;
         }
         .main-style{
         min-height: 100%;
         height: auto !important;
         height: 100%;
         max-width:800px;
         margin-left: auto;
         margin-right: auto;
         margin-bottom: -130px;
         /* the bottom margin is the negative value of the footer's height */
         }
         .sidebar-box {
         max-height: 300px;
         position: relative;
         overflow: hidden;
         }
         .sidebar-box .read-more { 
         position: absolute; 
         bottom: 0; 
         left: 0;
         width: 100%; 
         text-align: center; 
         margin: 0; padding: 30px 0; 
         /* "transparent" only works here because == rgba(0,0,0,0) */
         background-image: linear-gradient(to bottom, transparent, black);
         /*
         background-image: -webkit-gradient(
         linear,
         left top,
         left bottom,
         color-stop(0, rgba(255, 0, 0, 0)),
         color-stop(1, rgba(255, 0, 0, 100)));
         */
         }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="main-style">
         <article class="sidebar-box">
            <h1>„TADOConnection“ – Исправан начин да се користи „LoginPrompt := true“</h1>
            <p>
               Нисам до сада никако разумео шта "LoginPrompt := true" уопште ради.
               Али сада знам да је исправан начин да се користи следећи:
            </p>
            <pre>procedure TfrmMain.FormShow(Sender: TObject);
var
  i: integer;
begin
  con1.Provider := 'SQLOLEDB.1';
  con1.Properties['Application Name'].Value := Application.Title;
  with TIniFile.Create(ExtractFileDir(ParamStr(0)) + '\setup.ini') do
  begin
    con1.Properties['Initial Catalog'].Value := ReadString('database', 'Initial Catalog', '');
                                                     con1.Properties['Ddata Source'].Value := ReadString('database', 'Data Source', '');
    if ReadBool('database', 'Integrated Security', false ) then
    begin
      con1.Properties['Integrated Security'].Value := 'SSPI';
      con1.Properties['Persist Security Info'].Value := 'False';
      con1.LoginPrompt := False;
    end
    else
    begin
      con1.Properties['Persist Security Info'].Value := 'True';
      con1.LoginPrompt := true;
    end;
  end;
end;

procedure TfrmMain.con1Login(Sender: TObject; Username, Password: string);
begin
  con1.Properties['User ID'].Value := Username;
  con1.Properties['Password'].Value := Password;
end;
</pre>
            <p>
               Овај код чита нека обележја потребна за објекат конекције из ИНИ датотеке. Онда, на основу вредности "Integrated Security" обележја које налази у фајлу одлучује да ли ће да користи уграђену безбедност (виндовс) или сикјуел сервер безбедност. Ако користи сикјуел сервер беѕбедност онда ће ОнЛогон догађај бити позван након позива фукције Опен над конекцијом. Али мало пре тога ће корисник добити на екрану образац за уност корисничког имена и лозинке. И онда можете поставити те вредности у догађају.
            </p>
            <p>
               Важно је да се користи колекција обележја за додељивање ових вредности а не замена стрингова у стринг конекције, јер тако неће хтети да ради.
            </p>
            <p class="read-more"><a href="#" class="button">Читај више</a></p>
         </article>
         <br>  
         <div class="push"></div>
      </main>

Answer 1

你可以尝试让容器有两种状态

.container {
    max-height: 200px; // minimised
    overflow: hidden;
}

和

.conainer.active {
    max-height: auto;
}

显示更多按钮可以将事件类添加到容器中。

document.querySelector("#showMore").addEventListener(function(){
    document.querySelector(".contaner").classList.add("active");
});

showMore 是按钮的 ID，container 是文章的类。