如何在我的導航關閉后讓我的側導航選單中的打開元素不消失-有解無憂

我使用從www.w3school.com獲得的代碼放置了一個側導航選單，但我的側導航選單存在問題。當我關閉它時，與www.w3school.com不同，打開的元素不可見或不可訪問。我該如何解決這個問題？

function openNav() {
  document.getElementById("mySidenav").style.display = "block";
}

function closeNav() {
  document.getElementById("mySidenav").style.display = "none";
}

body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  display: none;
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<h2>Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
   
</body>
</html>

這是我的側面導航

function openNav() {
      document.getElementById("mynavbar").style.display = "block";
    }

function closeNav() {
      document.getElementById("mynavbar").style.display = "none";
    }

.navbar {
  height: 100%;
  width: 250px !important;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 60px;
}
.navbar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}
.nav-remove a:hover {
  color: #f1f1f1;
}
.closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
.nav-menu {
  display: block;
  z-index: auto;
}

<div id="mynavbar" class="navbar">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <div class="logo">
        <img src="{% static 'TheMachine Images/The Machine 2.png' %}" alt="">
      </div>
      <span class="HOME">HOME</span>
      <span class="ARTIST">ARTIST</span>
      <span class="ABOUTUS">ABOUT US</span>
      <div class="search-bar">
        <textarea name="" placeholder="Search" id="search-area" cols="16" rows="1"></textarea>
        <div class="search-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi-search" viewBox="0 0 16 16">
            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
          </svg>
        </div>
      </div>
      <div class="rec">
        <span class="SignIn">SignIN</span>
      </div>
      <div class="rec2">
        <span class="SignUP">SignUp</span>
      </div>
      <span class="nav-menu" style="font-size: 17px; cursor:pointer" onclick="openNav()">&#9776;OPEN</span>


    </div>

正如您所看到的，open 在第一個示例中是不可見的。我需要它在那里，這樣我才能打開選單。

uj5u.com熱心網友回復：

這是因為你的“open-span”在你用 js 隱藏的導航里面。將其移動到#mynavbardiv 的外部，使其保持可見。

代碼：

function openNav() {
  document.getElementById("mynavbar").style.display = "block";
}

function closeNav() {
  document.getElementById("mynavbar").style.display = "none";
}

.navbar {
  height: 100%;
  width: 250px !important;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 60px;
}
.navbar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}
.nav-remove a:hover {
  color: #f1f1f1;
}
.closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
.nav-menu {
  display: block;
  z-index: auto;
}

<div id="mynavbar" class="navbar">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="logo">
    <img src="{% static 'TheMachine Images/The Machine 2.png' %}" alt="">
  </div>
  <span class="HOME">HOME</span>
  <span class="ARTIST">ARTIST</span>
  <span class="ABOUTUS">ABOUT US</span>
  <div class="search-bar">
    <textarea name="" placeholder="Search" id="search-area" cols="16" rows="1"></textarea>
    <div class="search-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi-search" viewBox="0 0 16 16">
        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
      </svg>
    </div>
  </div>
  <div class="rec">
    <span class="SignIn">SignIN</span>
  </div>
  <div class="rec2">
    <span class="SignUP">SignUp</span>
  </div>

</div>
<span class="nav-menu" style="font-size: 17px; cursor:pointer" onclick="openNav()">&#9776;OPEN</span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/410096.html

標籤：

上一篇：如何在if條件下禁用按鈕

下一篇：從復選框獲取值并將它們發送到輸入文本