Javascript 为什么当我使用JS toggle（）显示div元素时，它下面会形成一个很大的间隙？

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

这是我的

---

您正在使用position:relative并赋予css最高值。这就是问题的根源。我在css中做了一些改变，包括位置和顶级值。这是你需要的

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

希望这能解决您的问题。

更改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%;
}

---

希望这能解决问题。

我创造了一个更好的切换效果，我想这就是你想要的

---

我不知道你的意思。你能澄清一下吗？去我的密码笔。当页面第一次呈现时，一切正常。现在，当您单击图像时，我可以隐藏图像并显示列表。但是，当列表显示时，它会在其下方创建一个很大的空白区域。是的，修复了它。我不知道为什么我以前必须做top:-829才能把它放到图片的顶部。现在你说的是绝对位置，它修正了它。谢谢。你应该先创建一个结构。

#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%;
}

var img = $('img');
var list = $('.list');
list.hide();

img.click(function(){
  $(this).fadeToggle(function(){
    list.fadeToggle();
  });
});

list.click(function(){
  $(this).fadeToggle(function(){
    img.fadeToggle();
  });
});