div中的内容重叠

Question

请点击open，然后点击close。收盘位于SLIDER div范围内，但当滑块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 ，如以下代码段所示：

＆＃13;

＆＃13;

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";
}

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

▶2 ^nd 选项：

或者，您可以尝试更聪明的方法，而不是使用 overflow: hidden 。在此解决方案中，我删除了其中一个链接，并根据是否显示滑块使另一个链接为open或close。

＆＃13;

＆＃13;

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

＆＃13;

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
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

为overflow: hidden;＆amp;添加.slider 删除margin-left

上打开的a代码上的inline

＆＃13;

＆＃13;

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";
	}

＆＃13;

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{overflow: hidden;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}

＆＃13;

<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()"> OPEN</a></div> </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是因为z-index: 1000。而是在openNav()和closeNav()

上切换您的z-index

＆＃13;

＆＃13;

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

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

＆＃13;

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: -1;
  display: inline-block;
}
a {
  color: #fff
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

只有opacity:0关闭slider，opacity:1关闭时才会{。\ n}}

＆＃13;

＆＃13;

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

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

＆＃13;

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 {
  opacity:0;
  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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;