为什么当我使用 JS 切换 () 显示它时，我的 div 元素下方形成了一个很大的间隙

Question

我让我的页面按照我想要的方式工作(基于我之前提出的问题(。但是，当我显示时间轴(默认为 display：none(时，它会在其下方产生很大的空白空间。如何删除此空白区域？我只希望时间线在单击图像时替换图像，反之亦然。

这是我的代码笔

I don't know what code to include here. 

Answer 1

你正在使用 position：relative 并给 css 顶部值。这导致了这个问题。我已经对带有位置和顶部值的 css 进行了一些更改。这符合您的要求。

#timeline{
  position:absolute;
  background-color:beige;
  /*top:-829px;*/
  top:210px;
  width: 755px;
  height: 827px;
  margin-left: 180px;
}

希望这可以解决您的问题。

Answer 2

更改 css，

#main-image-div{
  position: relative;
  margin: 0 auto;
  width: 750px;
  height: 400px;
}
#main-image-div img{
  max-width: 100%;
}
#timeline{
  position: absolute;
  left: 0; 
  top: 0;
  width: 100%;
  height: 100%;
}

希望这将解决问题。

Answer 3

我创建了一个更好的切换效果，我认为这就是你想要的。

http://codepen.io/anon/pen/dvdLpY

var img = $('img');
var list = $('.list');
list.hide();
img.click(function(){
  $(this).fadeToggle(function(){
    list.fadeToggle();
  });
});
list.click(function(){
  $(this).fadeToggle(function(){
    img.fadeToggle();
  });
});