Question

我的网站上有一个时间轴，只有在点击按钮时才会显示。实际上，有两个页面：一个页面的信息在单击按钮时消失，另一个是时间轴。我希望仅在单击按钮后才显示时间轴。所以我将包含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');

显示：if与iframe时间线无关

1 个答案: