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

Question

我的页面按照我想要的方式运行（基于我之前提出的问题）。但是，当我显示时间轴（默认为 display:none）时，它会在其下方创建一个很大的空白 space。我怎样才能删除这个空的space？我只希望时间轴在单击时替换图像，反之亦然。

这是我的code pen

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();
  });
});

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

Why is there a large gap formed beneath my div element when I display it using a JS toggle()?

html

javascript

css

display