javascript - div 中的内容重叠

Question

请点击打开，然后点击关闭。关闭位于 SLIDER div 中，但是当 slider div 的 width 为 0 时，close 文本仍然出现。

function openNav() {
  document.getElementById("main").style.marginLeft = "320px";
  document.getElementById("slider").style.width = "320px";
}

function closeNav() {
  document.getElementById("main").style.marginLeft = "0px";
  document.getElementById("slider").style.width = "0px";
}

body {
  margin: 0;
  padding: 0;
  background: #f1f1f1
}
#main {
  margin-left: 0px;
  transition: all 0.5s
}
.header {
  width: 100%;
  min-width: 320px;
  height: 60px;
  background: #154760;
}
.slider {
  width: 0;
  height: 669px;
  background: #066;
  position: fixed;
  top: 0;
  left: 0;
  transition: all 0.5s;
  z-index: 1000;
  display: inline-block;
}
a {
  color: #fff
}

<div class="slider" id="slider">
  <div style="width:inherit;display:inline-block"> <a href="JavaScript:void()" onclick="closeNav()" style="display:inline-block"> CLOSE</a> 
  </div>
</div>
<div id="main">
  <div class="header"> <a href="JavaScript:void()" onclick="openNav()" style="margin-left:50px"> OPEN</a>
  </div>
</div>

Answer 1

▶ 1^st 选项:

尝试将 overflow: hidden 添加到 .slider 中，如以下代码片段所示:

function openNav() {
  document.getElementById("main").style.marginLeft = "320px";
  document.getElementById("slider").style.width = "320px";
}

function closeNav() {
  document.getElementById("main").style.marginLeft = "0px";
  document.getElementById("slider").style.width = "0px";
}

body {
  margin: 0;
  padding: 0;
  background: #f1f1f1
}

#main {
  margin-left: 0px;
  transition: all 0.5s
}

.header {
  width: 100%;
  min-width: 320px;
  height: 60px;
  background: #154760;
}

.slider {
  width: 0;
  height: 669px;
  background: #066;
  position: fixed;
  top: 0;
  left: 0;
  transition: all 0.5s;
  z-index: 1000;
  display: inline-block;
  overflow: hidden;
}

a {
  color: #fff
}

<div class="slider" id="slider">
  <div style="width:inherit;display:inline-block"> <a href="JavaScript:void()" onclick="closeNav()" style="display:inline-block"> CLOSE</a> 
  </div>
</div>

<div id="main">
  <div class="header"> <a href="JavaScript:void()" onclick="openNav()" style="margin-left:50px"> OPEN</a>
  </div>
</div>

---

▶ 第二个^nd选项:

或者，您可以尝试一些更聪明的方法，而不是使用 overflow: hidden。在此解决方案中，我删除了一个链接，并根据是否显示 slider 使另一个链接打开或关闭。

function openNav() {
  document.getElementById("main").style.marginLeft = "320px";
  document.getElementById("slider").style.width = "320px";
  document.getElementById("open-close").innerHTML = "CLOSE";
}

function closeNav() {
  document.getElementById("main").style.marginLeft = "0px";
  document.getElementById("slider").style.width = "0px";
  document.getElementById("open-close").innerHTML = "OPEN";
}

var opened = false;

document.getElementById("open-close").onclick = function() {
  opened = !opened;
  return (opened) ? openNav() : closeNav();
}

body {
  margin: 0;
  padding: 0;
  background: #f1f1f1
}

#main {
  margin-left: 0px;
  transition: all 0.5s
}

.header {
  width: 100%;
  min-width: 320px;
  height: 60px;
  background: #154760;
}

.slider {
  width: 0;
  height: 669px;
  background: #066;
  transition: all 0.5s;
  display: inline-block;
}

.slider,
#open-close {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

#open-close {
  color: #fff
}

<div class="slider" id="slider"></div>

<div id="main">
  <div class="header">
    <a id = "open-close" href="JavaScript:void()"> OPEN</a>
  </div>
</div>