javascript - 当另一个 div 隐藏时移动一个 div

标签 javascript html css

div#content {
  position: relative;
  width: 100%;
  border: 1px solid black;
  height: 500px;
  bottom: 0px;
}

div#menu {
  position: absolute;
  height: 125px;
  width: 100%;
  border: 1px solid black;
  bottom: 0px;
  line-height: 125px;
  text-align: center;
}

div#recenter {
  line-height: 50px;
  text-align: center;
  border: 1px solid black;
  border-radius: 30px;
  position: absolute;
  margin: 10px;
  padding: 0px 20px;
  bottom: 180px;
  background-color: aliceblue;
}

div#geolocation {
  line-height: 50px;
  text-align: center;
  border: 1px solid black;
  position: absolute;
  margin: 10px;
  bottom: 125px;
  background-color: aliceblue;
}
<div id="content">
  <div id="recenter">Re-center</div>
  <div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>
  <div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';">MENU (CLICK ME)</div>
</div>

目前,当我在 JavaScript 中隐藏 #geolocation block 时,#recenter 按钮不会移动。

我想要的是当我运行以下 jQuery 命令时: $('#geolocation').hide(); (或者在js中:document.getElementById('geolocation').style.display = 'none';) #recenter 按钮移至底部(#geolocation block 所在的位置)

怎么办?

最佳答案

不要绝对定位元素,利用 flex 布局和对齐选项。

div#content {
  position: relative;
  width: 80%;
  margin: 1em auto;
  border: 1px solid black;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

div#menu {
  height: 50px;
  width: 80%;
  border: 1px solid black;
  text-align: center;
  margin: 0 auto;
}

div#recenter {
  line-height: 20px;
  text-align: center;
  border: 1px solid black;
  border-radius: 30px;
  margin: 10px;
  padding: 0px 10px;
  background-color: aliceblue;
}

div#geolocation {
  line-height: 20px;
  text-align: center;
  border: 1px solid black;
  margin: 10px;
  background-color: aliceblue;
}
<div id="content">
  <div id="recenter">Re-center</div>
  <div id="geolocation">My address is : 3958 Heron Way - Oregon 97351</div>
  <div id="menu" onclick="document.getElementById('geolocation').style.display = 'none';">MENU (CLICK ME)</div>
</div>

关于javascript - 当另一个 div 隐藏时移动一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60760158/

相关文章:

javascript - IntersectionObserver Polyfill 不会在 IE11 中加载

javascript - lightSlider 中的 lightGallery - 'onSliderLoad' 的 Slider.prepend() 不工作

javascript - 如何单独检测浏览器刷新

javascript - 光滑图像 slider 中的随机幻灯片顺序

javascript - 如何在 jQuery 中选中多个复选框?

android - Android 上不显示背景视频的第一帧

javascript - 单击时无法激活导航栏中的 Bootstrap 下拉菜单

javascript - 每秒获取视频帧的图片

java - CSS 解析文件 JavaFX 时出错,但我不知道出了什么问题

jquery - 多次应用 css transition