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

我希望使两个按钮都能正常工作。

4

2 回答 2

3

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

于 2019-11-05T09:10:19.727 回答
2

您没有在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>

于 2019-11-05T09:00:54.807 回答