Question

  <html>
<head><title></title></head>

<body>
  <div id="mySidenav1" class="sidenavlogin">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav1()">&times;</a>
  <a href="#">Government Departments</a>
  <a href="#">Service Agencies</a>
  <a href="#">Citizen</a>

</div>
<span class="login" onclick="openNav1()"> Login</span>

<!--api-->
<div id="mySidenav2" class="sidenavapi">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav2()">&times;</a>
  <a href="#">eKYB APK</a>
  <a href="#">eKYB API</a>

</div>
<span class="api" onclick="openNav2()"> API</span>
<script>
function openNav1() {
    document.getElementById("mySidenav1").style.width = "250px";
  }

function closeNav1() {
    document.getElementById("mySidenav1").style.width = "0";
   }
function openNav2() {
    document.getElementById("mySidenav2").style.width = "200px";
 }

function closeNav2() {
    document.getElementById("mySidenav2").style.width = "0";
 }
</body>
</html>

在上面的代码中打开api面板并且点击登录api面板时应该关闭。在这里我发布代码请通过这个建议。

Answer 1

使用style.display =＆＃34;无＆＃34;而不是指定宽度

Answer 2

您想使用element.style.display而不是width

element.style.display ='block';显示
element.style.display ='none';隐藏

<html>
<body>
	<div id="mySidenav1" class="sidenavlogin">
		<a href="javascript:void(0)" class="closebtn" onclick="closeNav1()">&times;</a>
		<a href="#">Government Departments</a>
		<a href="#">Service Agencies</a>
		<a href="#">Citizen</a>
	</div>
	<a href="javascript:void(0)" class="closebtn" onclick="openNav1()">+</a>
	<span class="login" onclick="openNav1()"> Login</span>

	<!--api-->
	<div id="mySidenav2" class="sidenavapi">
		<a href="javascript:void(0)" class="closebtn" onclick="closeNav2()">&times;</a>
		<a href="#">eKYB APK</a>
		<a href="#">eKYB API</a>
	</div>
	<a href="javascript:void(0)" class="closebtn" onclick="openNav2()">+</a>
	<span class="api" onclick="openNav2()"> API</span>
	<script>
		function openNav1() {
			document.getElementById("mySidenav1").style.display = "block";
		}

		function closeNav1() {
			document.getElementById("mySidenav1").style.display = "none";
		}
		function openNav2() {
			document.getElementById("mySidenav2").style.display = "block";
		}

		function closeNav2() {
			document.getElementById("mySidenav2").style.display = "none";
		}
	</script>
</body>
</html>

Answer 3

这是更新的代码。单击登录时，API面板将关闭。当您点击API时，登录面板将关闭。

function openNav1() {
  document.getElementById("mySidenav2").style.display = "none";
  document.getElementById("mySidenav1").style.display = "block";
}

function closeNav1() {
  document.getElementById("mySidenav1").style.display = "none";
}

function openNav2() {
  document.getElementById("mySidenav1").style.display = "none";
  document.getElementById("mySidenav2").style.display = "block";
}

function closeNav2() {
  document.getElementById("mySidenav2").style.display = "none";
}

.sidenavlogin,
.sidenavapi {
  display: none;
}

<div id="mySidenav1" class="sidenavlogin">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav1()">&times;</a>
  <a href="#">Government Departments</a>
  <a href="#">Service Agencies</a>
  <a href="#">Citizen</a>
</div>
<a href="javascript:void(0)" class="closebtn" onclick="openNav1()">+</a>
<span class="login" onclick="openNav1()"> Login</span>

<!--api-->
<div id="mySidenav2" class="sidenavapi">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav2()">&times;</a>
  <a href="#">eKYB APK</a>
  <a href="#">eKYB API</a>
</div>
<a href="javascript:void(0)" class="closebtn" onclick="openNav2()">+</a>
<span class="api" onclick="openNav2()"> API</span>

Answer 4

对nav块使用通用类。

与sideNav和style属性相似，而不是设置width。

function closeAll(){  
    var divsToHide = document.getElementsByClassName("sideNav");  
    for(var i = 0; i < divsToHide.length; i++) {  
    divsToHide[i].style.display = "none";  
     //     divsToHide[i].style.width = "0"; // if purpose fully you want to use width then use this  
    }  
}  

function openNav1() {  
    closeAll();   
    document.getElementById("mySidenav1").style.display = "block";  
}

单击其他按钮时如何隐藏已打开的面板？

4 个答案: