一页上的两个 sidenav 只能工作一个

Question

我想在我的页面上有两个侧边栏，一个在左侧，另一个在右侧。但是，如果我将两者都放在一个页面上，两个按钮都可以工作，但只打开一侧导航。他们只执行第二个 JavaScript。我需要的是左侧按钮打开左侧菜单，右侧菜单按钮打开右侧菜单。但现在我有两个菜单按钮只打开一侧。我在两个菜单中使用了不同的类。我找不到任何解决方案。

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

function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}
//For second nav
function openNav() {
  document.getElementById("mySidebar2").style.width = "250px";
  document.getElementById("main2").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidebar2").style.width = "0";
  document.getElementById("main2").style.marginLeft= "0";
}

/*Left nav*/
*{
margin: 0;
padding: 0;
}
body {
  font-family: "Lato", sans-serif;
}
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #f3a148;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #000000;
  display: block;
  transition: 0.3s;
}

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

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

.openbtn {
  font-size: 16px;
  cursor: pointer;
  background-color: #f4b36d;
  color: #000000;
  padding: 10px 15px;
  border: none;
  position: fixed;
  top: 50%;
  left:-30px;
  transform: rotate(-90deg);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  
}

.openbtn:hover {
  background-color: #f3a148;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}
.fa-address-card, .fa-coins, .fa-grin-alt, .fa-envelope{
 position: relative;
 top: 41px;
 left: 5px;
 font-size: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}
/*right nav------*/
*{
margin: 0;
padding: 0;
}
body {
  font-family: "Lato", sans-serif;
}

.sidebar2 {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #f3a148;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar2 a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #000000;
  display: block;
  transition: 0.3s;
}

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

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

.openbtn2 {
  font-size: 16px;
  cursor: pointer;
  background-color: #f4b36d;
  color: #000000;
  padding: 10px 15px;
  border: none;
  position: fixed;
  top: 50%;
  right: -30px;
  transform: rotate(90deg);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  
}

.openbtn2:hover {
  background-color: #f3a148;
}

#main2 {
  transition: margin-left .5s;
  padding: 16px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

<footer class="container-fluid footPos">
      <div class="row footer">
        <div class="col-sm-2">
        <!-- right sidenav -->
            <div id="mySidebar2" class="sidebar2">
                <a href="javascript:void(0)" class="closebtn2" onclick="closeNav()">×</a>
                <i class="far fa-address-card"></i><a href="#">Link</a>
                <i class="fas fa-coins"></i><a href="#">Link</a>
                <i class="far fa-grin-alt"></i><a href="#">Link</a>
                <i class="far fa-envelope"></i><a href="#">Link</a>
            </div>
            <div id="main2">
                <button class="openbtn2" onclick="openNav()">☰ Meniu</button>  
            </div>
        <!-- right sidenav end -->
        </div>
        <div class="col-sm-8">
            <h4 class="footTxt"><a href="#" class="footLink">Link</a></h4>
            <h4 class="footTxt"><a href="#" class="footLink">Link</a></h4>
            <h4 class="footTxt">Link</h4>
        </div>
  <div class="col-sm-2">
   <!--left side -->
   <div id="mySidebar" class="sidebar">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
    <i class="far fa-address-card"></i><a href="#">Apie mus</a>
    <i class="fas fa-coins"></i><a href="#">Paslaugos</a>
    <i class="far fa-grin-alt"></i><a href="#">Klientai</a>
    <i class="far fa-envelope"></i><a href="#">Kontaktai</a>
   </div>
   <div id="main">
    <button class="openbtn" onclick="openNav()">☰ Meniu</button>  
   </div>

   <!--left side end-->
  </div>
   </div> 
</footer>

我想让两个按钮都能正常工作。

Answer 1

您没有在 JavaScript 中分离您的函数，它们的名称相似。重命名

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

function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}
//For second nav
function openNav2() {
  document.getElementById("mySidebar2").style.width = "250px";
  document.getElementById("main2").style.marginLeft = "250px";
}

function closeNav2() {
  document.getElementById("mySidebar2").style.width = "0";
  document.getElementById("main2").style.marginLeft= "0";
}

/*Left nav*/
*{
margin: 0;
padding: 0;
}
body {
  font-family: "Lato", sans-serif;
}
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #f3a148;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #000000;
  display: block;
  transition: 0.3s;
}

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

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

.openbtn {
  font-size: 16px;
  cursor: pointer;
  background-color: #f4b36d;
  color: #000000;
  padding: 10px 15px;
  border: none;
  position: fixed;
  top: 50%;
  left:-30px;
  transform: rotate(-90deg);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  
}

.openbtn:hover {
  background-color: #f3a148;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}
.fa-address-card, .fa-coins, .fa-grin-alt, .fa-envelope{
 position: relative;
 top: 41px;
 left: 5px;
 font-size: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}
/*right nav------*/
*{
margin: 0;
padding: 0;
}
body {
  font-family: "Lato", sans-serif;
}

.sidebar2 {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #f3a148;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar2 a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #000000;
  display: block;
  transition: 0.3s;
}

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

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

.openbtn2 {
  font-size: 16px;
  cursor: pointer;
  background-color: #f4b36d;
  color: #000000;
  padding: 10px 15px;
  border: none;
  position: fixed;
  top: 50%;
  right: -30px;
  transform: rotate(90deg);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  
}

.openbtn2:hover {
  background-color: #f3a148;
}

#main2 {
  transition: margin-left .5s;
  padding: 16px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

<footer class="container-fluid footPos">
      <div class="row footer">
        <div class="col-sm-2">
        <!-- right sidenav -->
            <div id="mySidebar2" class="sidebar2">
                <a href="javascript:void(0)" class="closebtn2" onclick="closeNav2()">×</a>
                <i class="far fa-address-card"></i><a href="#">Link</a>
                <i class="fas fa-coins"></i><a href="#">Link</a>
                <i class="far fa-grin-alt"></i><a href="#">Link</a>
                <i class="far fa-envelope"></i><a href="#">Link</a>
            </div>
            <div id="main2">
                <button class="openbtn2" onclick="openNav2()">☰ Meniu</button>  
            </div>
        <!-- right sidenav end -->
        </div>
        <div class="col-sm-8">
            <h4 class="footTxt"><a href="#" class="footLink">Link</a></h4>
            <h4 class="footTxt"><a href="#" class="footLink">Link</a></h4>
            <h4 class="footTxt">Link</h4>
        </div>
  <div class="col-sm-2">
   <!--left side -->
   <div id="mySidebar" class="sidebar">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
    <i class="far fa-address-card"></i><a href="#">Apie mus</a>
    <i class="fas fa-coins"></i><a href="#">Paslaugos</a>
    <i class="far fa-grin-alt"></i><a href="#">Klientai</a>
    <i class="far fa-envelope"></i><a href="#">Kontaktai</a>
   </div>
   <div id="main">
    <button class="openbtn" onclick="openNav()">☰ Meniu</button>  
   </div>

   <!--left side end-->
  </div>
   </div> 
</footer>

Answer 2

您对这两个按钮使用了相同的功能 openNav。您可以通过在参数中传递 navid 来解决此问题，并可以在 getElementById 中使用此参数来显示隐藏导航。

请参阅下面的工作代码。

        function openNav(sidebarId, main) {
            document.getElementById(sidebarId).style.width = "250px";
            document.getElementById(main).style.marginLeft = "250px";
        }

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

       /*Left nav*/
        
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: "Lato", sans-serif;
        }
        
        .sidebar {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #f3a148;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
        }
        
        .sidebar a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #000000;
            display: block;
            transition: 0.3s;
        }
        
        .sidebar a:hover {
            color: #f1f1f1;
        }
        
        .sidebar .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }
        
        .openbtn {
            font-size: 16px;
            cursor: pointer;
            background-color: #f4b36d;
            color: #000000;
            padding: 10px 15px;
            border: none;
            position: fixed;
            top: 50%;
            left: -30px;
            transform: rotate(-90deg);
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .openbtn:hover {
            background-color: #f3a148;
        }
        
        #main {
            transition: margin-left .5s;
            padding: 16px;
        }
        
        .fa-address-card,
        .fa-coins,
        .fa-grin-alt,
        .fa-envelope {
            position: relative;
            top: 41px;
            left: 5px;
            font-size: 20px;
        }
        /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
        
        @media screen and (max-height: 450px) {
            .sidebar {
                padding-top: 15px;
            }
            .sidebar a {
                font-size: 18px;
            }
        }
        /*right nav------*/
        
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: "Lato", sans-serif;
        }
        
        .sidebar2 {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            right: 0;
            background-color: #f3a148;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
        }
        
        .sidebar2 a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #000000;
            display: block;
            transition: 0.3s;
        }
        
        .sidebar2 a:hover {
            color: #f1f1f1;
        }
        
        .sidebar2 .closebtn2 {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }
        
        .openbtn2 {
            font-size: 16px;
            cursor: pointer;
            background-color: #f4b36d;
            color: #000000;
            padding: 10px 15px;
            border: none;
            position: fixed;
            top: 50%;
            right: -30px;
            transform: rotate(90deg);
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .openbtn2:hover {
            background-color: #f3a148;
        }
        
        #main2 {
            transition: margin-left .5s;
            padding: 16px;
        }
        /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
        
        @media screen and (max-height: 450px) {
            .sidebar {
                padding-top: 15px;
            }
            .sidebar a {
                font-size: 18px;
            }
        }

<footer class="container-fluid footPos">
        <div class="row footer">
            <div class="col-sm-2">
                <!-- right sidenav -->
                <div id="mySidebar2" class="sidebar2">
                    <a href="javascript:void(0)" class="closebtn2" onclick="closeNav('mySidebar2', 'main2')">×</a>
                    <i class="far fa-address-card"></i><a href="#">Link</a>
                    <i class="fas fa-coins"></i><a href="#">Link</a>
                    <i class="far fa-grin-alt"></i><a href="#">Link</a>
                    <i class="far fa-envelope"></i><a href="#">Link</a>
                </div>
                <div id="main2">
                    <button class="openbtn2" onclick="openNav('mySidebar2', 'main2')">☰ Meniu</button>
                </div>
                <!-- right sidenav end -->
            </div>
            <div class="col-sm-8">
                <h4 class="footTxt"><a href="#" class="footLink">Link</a></h4>
                <h4 class="footTxt"><a href="#" class="footLink">Link</a></h4>
                <h4 class="footTxt">Link</h4>
            </div>
            <div class="col-sm-2">
                <!--left side -->
                <div id="mySidebar" class="sidebar">
                    <a href="javascript:void(0)" class="closebtn" onclick="closeNav('mySidebar', 'main2')">×</a>
                    <i class="far fa-address-card"></i><a href="#">Apie mus</a>
                    <i class="fas fa-coins"></i><a href="#">Paslaugos</a>
                    <i class="far fa-grin-alt"></i><a href="#">Klientai</a>
                    <i class="far fa-envelope"></i><a href="#">Kontaktai</a>
                </div>
                <div id="main">
                    <button class="openbtn" onclick="openNav('mySidebar', 'main2')">☰ Meniu </button>
                </div>
                <!--left side end-->
            </div>
        </div>
    </footer>

一页上的两个 sidenav 只能工作一个

Two sidenav on one page works only one

javascript

sidenav