Question

在我的代码中，当侧面导航打开时，我试图隐藏onClick上的“打开”导航按钮。当我单击openNav按钮时，我希望隐藏按钮，当我关闭时，按钮应该显示。

我看过类似的问题，但我找不到有用的东西。

＆＃13;

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

＆＃13;

<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>
<button class="pull-right btnstyle" onclick="openNav()">&times;</button>
<div id="main">
  <h2>Sidenav Push Example</h2>
  <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
</div>

＆＃13;

Answer 1

您可以使用解决方案https://jsfiddle.net/748fhbkw/2/

 openNav = function() {
  $('button[id="openModal"]').hide();
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  
}

closeNav = function() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
  $('button[id="openModal"]').show();
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>
<button id="openModal" class="pull-right btnstyle" onclick="openNav()">&times;</button>
<div id="main">
  <h2>Sidenav Push Example</h2>
  <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
</div>

Answer 2

你尝试过使用吗？

document.getElementById（＆＃34; mySidenav＆＃34;）。style.display =＆＃34; none＆＃34;;

Answer 3

只需在打开菜单时隐藏按钮，然后在关闭菜单时显示该按钮。

＆＃13;

function openNav(open) {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  open.style.display = 'none'; //it will hide the element that is passed in the function parameter
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
  document.getElementById('openButton').style.display = 'block'; //it will show the button that is used to open the menu 
}

＆＃13;

<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>
<button class="pull-right btnstyle" id="openButton" onclick="openNav(this)">&times;</button>
<div id="main">
	<h2>Sidenav Push Example</h2>
	<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
</div>

＆＃13;

Answer 4

我已将document.getElementById("mySidenav").style.display = "block";添加到您的openNav()并将其反转为closeNav()。对于打开/关闭按钮也是如此。

我还将style="display: none;"添加为菜单的默认设置，因此菜单不会在开头显示。

＆＃13;

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  document.getElementById("mySidenav").style.display = "block"; // This one to show the menu
  document.getElementById("openmenu").style.display = "none"; // and hide the "Open Menu"-Button
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
  document.getElementById("mySidenav").style.display = "none"; // This one to hide the menu
  document.getElementById("openmenu").style.display = "block"; // and show the "Open Menu"-Button
}

＆＃13;

<div id="mySidenav" class="sidenav" style="display: none;">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">Close Menu</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<button class="pull-right btnstyle" id="openmenu" onclick="openNav()">Open Menu</button>
<div id="main">
  <h2>Sidenav Push Example</h2>
  <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
</div>

＆＃13;

隐藏/显示按钮使用JavaScript导航onClick

4 个答案: