jquery - 显示 : none goes weird with iframe timeline

Question

我的网站上有一个时间轴，它应该只在单击按钮时显示。事实上，有 2 个页面:一个是单击按钮时消失的信息，另一个是时间线。我希望仅在单击按钮后才显示时间轴。所以我把包含 iframe 的 div 隐藏起来，比如:

var main=function(){
     $('#timeline').on('click',function(){
    /*   $(this).text(function(text) {
            return text === "Timeline mode" ? "Information mode" : "Timeline mode";
        });
     Doesn't work
     */
      $('div').toggle();
    });
};
                  
                  
$(document).ready(main);

div.timeline{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<button type="button" class="btn btn-primary" id="timeline">Timeline mode</button>

<div class="timeline">
    <h1>Something</h1>
    <iframe src='https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI&font=Default&lang=en&initial_zoom=2&height=650' 
            width='100%' height='650' frameborder='0'></iframe>
</div>

<div class="container">
informations  
</div>

如您所见，当我显示时间轴时，由于 display:none; 的原因，它很奇怪。标题相互重叠(我读到这是因为浏览器在 blablabla 之后显示 iframe)。

我找到了一个解决方案，将可见性设置为隐藏，因为 iframe 将被浏览器很好地显示但只是隐藏。

所以我把包含iframe的div隐藏起来了。但是这样做时间轴会占用我不想要的页面空间......

问题:如何正确显示时间线iframe？ (visibility:hidden; 时间线没有占据任何位置/display: none; 有效)

(我不想使用它显示但在屏幕外的技巧)

Answer 1

在不深入探讨导致更大问题的原因的情况下，您真正​​要求的是将其设置为同时管理布局和可见性。

.timeline { visibility:hidden; position:absolute; pointer-events:none; }
.timeline.active { visibility: visible; position: static; pointer-events: all }

你可以用这样的东西来完成切换:

$('.timeline').toggleClass('active');